<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>第 51 章 jQuery 简介 | 前端开发2020版</title>
  <meta name="description" content="掌握前端开发的基础知识" />
  <meta name="generator" content="bookdown 0.17.2 and GitBook 2.6.7" />

  <meta property="og:title" content="第 51 章 jQuery 简介 | 前端开发2020版" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="掌握前端开发的基础知识" />
  <meta name="github-repo" content="yangjh-xbmu/front-end" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="第 51 章 jQuery 简介 | 前端开发2020版" />
  
  <meta name="twitter:description" content="掌握前端开发的基础知识" />
  

<meta name="author" content="杨志宏" />



  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="vue-js-组件.html"/>
<link rel="next" href="jquery应用案例.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />











<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css\style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">front-end</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>前言</a><ul>
<li class="chapter" data-level="0.1" data-path="index.html"><a href="index.html#什么是前端网络开发"><i class="fa fa-check"></i><b>0.1</b> 什么是前端网络开发</a></li>
<li class="chapter" data-level="0.2" data-path="index.html"><a href="index.html#本书的特点"><i class="fa fa-check"></i><b>0.2</b> 本书的特点</a></li>
<li class="chapter" data-level="0.3" data-path="index.html"><a href="index.html#本书的目标"><i class="fa fa-check"></i><b>0.3</b> 本书的目标</a></li>
<li class="chapter" data-level="0.4" data-path="index.html"><a href="index.html#在线阅读地址"><i class="fa fa-check"></i><b>0.4</b> 在线阅读地址</a></li>
<li class="chapter" data-level="0.5" data-path="index.html"><a href="index.html#学习资源"><i class="fa fa-check"></i><b>0.5</b> 学习资源</a><ul>
<li class="chapter" data-level="0.5.1" data-path="index.html"><a href="index.html#国外课程"><i class="fa fa-check"></i><b>0.5.1</b> 国外课程</a></li>
<li class="chapter" data-level="0.5.2" data-path="index.html"><a href="index.html#行业导航"><i class="fa fa-check"></i><b>0.5.2</b> 行业导航</a></li>
<li class="chapter" data-level="0.5.3" data-path="index.html"><a href="index.html#技术社区"><i class="fa fa-check"></i><b>0.5.3</b> 技术社区</a></li>
<li class="chapter" data-level="0.5.4" data-path="index.html"><a href="index.html#技术专家博客"><i class="fa fa-check"></i><b>0.5.4</b> 技术专家博客</a></li>
<li class="chapter" data-level="0.5.5" data-path="index.html"><a href="index.html#html"><i class="fa fa-check"></i><b>0.5.5</b> HTML</a></li>
<li class="chapter" data-level="0.5.6" data-path="index.html"><a href="index.html#css"><i class="fa fa-check"></i><b>0.5.6</b> CSS</a></li>
<li class="chapter" data-level="0.5.7" data-path="index.html"><a href="index.html#ui框架"><i class="fa fa-check"></i><b>0.5.7</b> UI框架</a></li>
<li class="chapter" data-level="0.5.8" data-path="index.html"><a href="index.html#javascript"><i class="fa fa-check"></i><b>0.5.8</b> JavaScript</a></li>
<li class="chapter" data-level="0.5.9" data-path="index.html"><a href="index.html#前端兼职"><i class="fa fa-check"></i><b>0.5.9</b> 前端兼职</a></li>
<li class="chapter" data-level="0.5.10" data-path="index.html"><a href="index.html#工具"><i class="fa fa-check"></i><b>0.5.10</b> 工具</a></li>
<li class="chapter" data-level="0.5.11" data-path="index.html"><a href="index.html#前端框架"><i class="fa fa-check"></i><b>0.5.11</b> 前端框架</a></li>
<li class="chapter" data-level="0.5.12" data-path="index.html"><a href="index.html#作品赏析"><i class="fa fa-check"></i><b>0.5.12</b> 作品赏析</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>I HTML</b></span></li>
<li class="chapter" data-level="1" data-path="html-histroy.html"><a href="html-histroy.html"><i class="fa fa-check"></i><b>1</b> HTML 简介</a><ul>
<li class="chapter" data-level="1.1" data-path="html-histroy.html"><a href="html-histroy.html#html-发展简史"><i class="fa fa-check"></i><b>1.1</b> HTML 发展简史</a></li>
<li class="chapter" data-level="1.2" data-path="html-histroy.html"><a href="html-histroy.html#在线学习资源及工具"><i class="fa fa-check"></i><b>1.2</b> 在线学习资源及工具</a></li>
<li class="chapter" data-level="1.3" data-path="html-histroy.html"><a href="html-histroy.html#扩展阅读资料"><i class="fa fa-check"></i><b>1.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="web-standard.html"><a href="web-standard.html"><i class="fa fa-check"></i><b>2</b> Web 标准</a><ul>
<li class="chapter" data-level="2.1" data-path="web-standard.html"><a href="web-standard.html#web-标准产生背景"><i class="fa fa-check"></i><b>2.1</b> Web 标准产生背景</a></li>
<li class="chapter" data-level="2.2" data-path="web-standard.html"><a href="web-standard.html#web-标准的内容"><i class="fa fa-check"></i><b>2.2</b> Web 标准的内容</a></li>
<li class="chapter" data-level="2.3" data-path="web-standard.html"><a href="web-standard.html#扩展阅读材料"><i class="fa fa-check"></i><b>2.3</b> 扩展阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="html-term.html"><a href="html-term.html"><i class="fa fa-check"></i><b>3</b> HTML 基础概念及规则</a><ul>
<li class="chapter" data-level="3.1" data-path="html-term.html"><a href="html-term.html#html-基本结构"><i class="fa fa-check"></i><b>3.1</b> HTML 基本结构</a></li>
<li class="chapter" data-level="3.2" data-path="html-term.html"><a href="html-term.html#元素及标签"><i class="fa fa-check"></i><b>3.2</b> 元素及标签</a></li>
<li class="chapter" data-level="3.3" data-path="html-term.html"><a href="html-term.html#属性及属性值"><i class="fa fa-check"></i><b>3.3</b> 属性及属性值</a></li>
<li class="chapter" data-level="3.4" data-path="html-term.html"><a href="html-term.html#特殊字符"><i class="fa fa-check"></i><b>3.4</b> 特殊字符</a></li>
<li class="chapter" data-level="3.5" data-path="html-term.html"><a href="html-term.html#扩展阅读资料-1"><i class="fa fa-check"></i><b>3.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="htmlelement.html"><a href="htmlelement.html"><i class="fa fa-check"></i><b>4</b> <code>html</code>元素</a></li>
<li class="chapter" data-level="5" data-path="html-meta.html"><a href="html-meta.html"><i class="fa fa-check"></i><b>5</b> 文档元数据相关元素</a><ul>
<li class="chapter" data-level="5.1" data-path="html-meta.html"><a href="html-meta.html#head"><i class="fa fa-check"></i><b>5.1</b> head</a></li>
<li class="chapter" data-level="5.2" data-path="html-meta.html"><a href="html-meta.html#title"><i class="fa fa-check"></i><b>5.2</b> title</a></li>
<li class="chapter" data-level="5.3" data-path="html-meta.html"><a href="html-meta.html#base"><i class="fa fa-check"></i><b>5.3</b> base</a></li>
<li class="chapter" data-level="5.4" data-path="html-meta.html"><a href="html-meta.html#link"><i class="fa fa-check"></i><b>5.4</b> link</a></li>
<li class="chapter" data-level="5.5" data-path="html-meta.html"><a href="html-meta.html#meta"><i class="fa fa-check"></i><b>5.5</b> meta</a></li>
<li class="chapter" data-level="5.6" data-path="html-meta.html"><a href="html-meta.html#style"><i class="fa fa-check"></i><b>5.6</b> style</a></li>
<li class="chapter" data-level="5.7" data-path="html-meta.html"><a href="html-meta.html#扩展阅读资料-2"><i class="fa fa-check"></i><b>5.7</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="html-sections.html"><a href="html-sections.html"><i class="fa fa-check"></i><b>6</b> 区块元素</a><ul>
<li class="chapter" data-level="6.1" data-path="html-sections.html"><a href="html-sections.html#块元素与行内元素"><i class="fa fa-check"></i><b>6.1</b> 块元素与行内元素</a></li>
<li class="chapter" data-level="6.2" data-path="html-sections.html"><a href="html-sections.html#区块元素"><i class="fa fa-check"></i><b>6.2</b> 区块元素</a><ul>
<li class="chapter" data-level="6.2.1" data-path="html-sections.html"><a href="html-sections.html#body"><i class="fa fa-check"></i><b>6.2.1</b> body</a></li>
<li class="chapter" data-level="6.2.2" data-path="html-sections.html"><a href="html-sections.html#article"><i class="fa fa-check"></i><b>6.2.2</b> article</a></li>
<li class="chapter" data-level="6.2.3" data-path="html-sections.html"><a href="html-sections.html#section"><i class="fa fa-check"></i><b>6.2.3</b> section</a></li>
<li class="chapter" data-level="6.2.4" data-path="html-sections.html"><a href="html-sections.html#nav"><i class="fa fa-check"></i><b>6.2.4</b> nav</a></li>
<li class="chapter" data-level="6.2.5" data-path="html-sections.html"><a href="html-sections.html#aside"><i class="fa fa-check"></i><b>6.2.5</b> aside</a></li>
<li class="chapter" data-level="6.2.6" data-path="html-sections.html"><a href="html-sections.html#h1h2h6"><i class="fa fa-check"></i><b>6.2.6</b> h1,h2,…h6</a></li>
<li class="chapter" data-level="6.2.7" data-path="html-sections.html"><a href="html-sections.html#header"><i class="fa fa-check"></i><b>6.2.7</b> header</a></li>
<li class="chapter" data-level="6.2.8" data-path="html-sections.html"><a href="html-sections.html#footer"><i class="fa fa-check"></i><b>6.2.8</b> footer</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="html-sections.html"><a href="html-sections.html#扩展阅读资料-3"><i class="fa fa-check"></i><b>6.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="html-group.html"><a href="html-group.html"><i class="fa fa-check"></i><b>7</b> 内容组织元素</a><ul>
<li class="chapter" data-level="7.1" data-path="html-group.html"><a href="html-group.html#内容组织相关元素"><i class="fa fa-check"></i><b>7.1</b> 内容组织相关元素</a><ul>
<li class="chapter" data-level="7.1.1" data-path="html-group.html"><a href="html-group.html#p"><i class="fa fa-check"></i><b>7.1.1</b> p</a></li>
<li class="chapter" data-level="7.1.2" data-path="html-group.html"><a href="html-group.html#address"><i class="fa fa-check"></i><b>7.1.2</b> address</a></li>
<li class="chapter" data-level="7.1.3" data-path="html-group.html"><a href="html-group.html#hr"><i class="fa fa-check"></i><b>7.1.3</b> hr</a></li>
<li class="chapter" data-level="7.1.4" data-path="html-group.html"><a href="html-group.html#pre"><i class="fa fa-check"></i><b>7.1.4</b> pre</a></li>
<li class="chapter" data-level="7.1.5" data-path="html-group.html"><a href="html-group.html#blockquote"><i class="fa fa-check"></i><b>7.1.5</b> blockquote</a></li>
<li class="chapter" data-level="7.1.6" data-path="html-group.html"><a href="html-group.html#ol"><i class="fa fa-check"></i><b>7.1.6</b> ol</a></li>
<li class="chapter" data-level="7.1.7" data-path="html-group.html"><a href="html-group.html#ul"><i class="fa fa-check"></i><b>7.1.7</b> ul</a></li>
<li class="chapter" data-level="7.1.8" data-path="html-group.html"><a href="html-group.html#li"><i class="fa fa-check"></i><b>7.1.8</b> li</a></li>
<li class="chapter" data-level="7.1.9" data-path="html-group.html"><a href="html-group.html#dl"><i class="fa fa-check"></i><b>7.1.9</b> dl</a></li>
<li class="chapter" data-level="7.1.10" data-path="html-group.html"><a href="html-group.html#dt"><i class="fa fa-check"></i><b>7.1.10</b> dt</a></li>
<li class="chapter" data-level="7.1.11" data-path="html-group.html"><a href="html-group.html#dd"><i class="fa fa-check"></i><b>7.1.11</b> dd</a></li>
<li class="chapter" data-level="7.1.12" data-path="html-group.html"><a href="html-group.html#figure"><i class="fa fa-check"></i><b>7.1.12</b> figure</a></li>
<li class="chapter" data-level="7.1.13" data-path="html-group.html"><a href="html-group.html#figcaption"><i class="fa fa-check"></i><b>7.1.13</b> figcaption</a></li>
<li class="chapter" data-level="7.1.14" data-path="html-group.html"><a href="html-group.html#main"><i class="fa fa-check"></i><b>7.1.14</b> main</a></li>
<li class="chapter" data-level="7.1.15" data-path="html-group.html"><a href="html-group.html#div"><i class="fa fa-check"></i><b>7.1.15</b> div</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="html-group.html"><a href="html-group.html#扩展阅读资料-4"><i class="fa fa-check"></i><b>7.2</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="html-text.html"><a href="html-text.html"><i class="fa fa-check"></i><b>8</b> 文本语义元素</a><ul>
<li class="chapter" data-level="8.1" data-path="html-text.html"><a href="html-text.html#a"><i class="fa fa-check"></i><b>8.1</b> a</a></li>
<li class="chapter" data-level="8.2" data-path="html-text.html"><a href="html-text.html#em"><i class="fa fa-check"></i><b>8.2</b> em</a></li>
<li class="chapter" data-level="8.3" data-path="html-text.html"><a href="html-text.html#strong"><i class="fa fa-check"></i><b>8.3</b> strong</a></li>
<li class="chapter" data-level="8.4" data-path="html-text.html"><a href="html-text.html#small"><i class="fa fa-check"></i><b>8.4</b> small</a></li>
<li class="chapter" data-level="8.5" data-path="html-text.html"><a href="html-text.html#s"><i class="fa fa-check"></i><b>8.5</b> s</a></li>
<li class="chapter" data-level="8.6" data-path="html-text.html"><a href="html-text.html#cite"><i class="fa fa-check"></i><b>8.6</b> cite</a></li>
<li class="chapter" data-level="8.7" data-path="html-text.html"><a href="html-text.html#q"><i class="fa fa-check"></i><b>8.7</b> q</a></li>
<li class="chapter" data-level="8.8" data-path="html-text.html"><a href="html-text.html#dfn"><i class="fa fa-check"></i><b>8.8</b> dfn</a></li>
<li class="chapter" data-level="8.9" data-path="html-text.html"><a href="html-text.html#abbr"><i class="fa fa-check"></i><b>8.9</b> abbr</a></li>
<li class="chapter" data-level="8.10" data-path="html-text.html"><a href="html-text.html#data"><i class="fa fa-check"></i><b>8.10</b> data</a></li>
<li class="chapter" data-level="8.11" data-path="html-text.html"><a href="html-text.html#time"><i class="fa fa-check"></i><b>8.11</b> time</a></li>
<li class="chapter" data-level="8.12" data-path="html-text.html"><a href="html-text.html#code"><i class="fa fa-check"></i><b>8.12</b> code</a></li>
<li class="chapter" data-level="8.13" data-path="html-text.html"><a href="html-text.html#var"><i class="fa fa-check"></i><b>8.13</b> var</a></li>
<li class="chapter" data-level="8.14" data-path="html-text.html"><a href="html-text.html#samp"><i class="fa fa-check"></i><b>8.14</b> samp</a></li>
<li class="chapter" data-level="8.15" data-path="html-text.html"><a href="html-text.html#kbd"><i class="fa fa-check"></i><b>8.15</b> kbd</a></li>
<li class="chapter" data-level="8.16" data-path="html-text.html"><a href="html-text.html#sub-和-sup"><i class="fa fa-check"></i><b>8.16</b> sub 和 sup</a></li>
<li class="chapter" data-level="8.17" data-path="html-text.html"><a href="html-text.html#i"><i class="fa fa-check"></i><b>8.17</b> i</a></li>
<li class="chapter" data-level="8.18" data-path="html-text.html"><a href="html-text.html#b"><i class="fa fa-check"></i><b>8.18</b> b</a></li>
<li class="chapter" data-level="8.19" data-path="html-text.html"><a href="html-text.html#u"><i class="fa fa-check"></i><b>8.19</b> u</a></li>
<li class="chapter" data-level="8.20" data-path="html-text.html"><a href="html-text.html#mark"><i class="fa fa-check"></i><b>8.20</b> mark</a></li>
<li class="chapter" data-level="8.21" data-path="html-text.html"><a href="html-text.html#ruby"><i class="fa fa-check"></i><b>8.21</b> ruby</a></li>
<li class="chapter" data-level="8.22" data-path="html-text.html"><a href="html-text.html#span"><i class="fa fa-check"></i><b>8.22</b> span</a></li>
<li class="chapter" data-level="8.23" data-path="html-text.html"><a href="html-text.html#br"><i class="fa fa-check"></i><b>8.23</b> br</a></li>
<li class="chapter" data-level="8.24" data-path="html-text.html"><a href="html-text.html#扩展阅读资料-5"><i class="fa fa-check"></i><b>8.24</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="html-edit.html"><a href="html-edit.html"><i class="fa fa-check"></i><b>9</b> 编辑相关元素</a><ul>
<li class="chapter" data-level="9.1" data-path="html-edit.html"><a href="html-edit.html#ins"><i class="fa fa-check"></i><b>9.1</b> ins</a></li>
<li class="chapter" data-level="9.2" data-path="html-edit.html"><a href="html-edit.html#del"><i class="fa fa-check"></i><b>9.2</b> del</a></li>
<li class="chapter" data-level="9.3" data-path="html-edit.html"><a href="html-edit.html#扩展阅读资料-6"><i class="fa fa-check"></i><b>9.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="html-embed.html"><a href="html-embed.html"><i class="fa fa-check"></i><b>10</b> 嵌入内容元素</a><ul>
<li class="chapter" data-level="10.1" data-path="html-embed.html"><a href="html-embed.html#picture"><i class="fa fa-check"></i><b>10.1</b> picture</a></li>
<li class="chapter" data-level="10.2" data-path="html-embed.html"><a href="html-embed.html#img"><i class="fa fa-check"></i><b>10.2</b> img</a></li>
<li class="chapter" data-level="10.3" data-path="html-embed.html"><a href="html-embed.html#iframe"><i class="fa fa-check"></i><b>10.3</b> iframe</a></li>
<li class="chapter" data-level="10.4" data-path="html-embed.html"><a href="html-embed.html#embed"><i class="fa fa-check"></i><b>10.4</b> embed</a><ul>
<li class="chapter" data-level="10.4.1" data-path="html-embed.html"><a href="html-embed.html#嵌入-flash"><i class="fa fa-check"></i><b>10.4.1</b> 嵌入 flash</a></li>
<li class="chapter" data-level="10.4.2" data-path="html-embed.html"><a href="html-embed.html#嵌入视频平台的内容"><i class="fa fa-check"></i><b>10.4.2</b> 嵌入视频平台的内容</a></li>
</ul></li>
<li class="chapter" data-level="10.5" data-path="html-embed.html"><a href="html-embed.html#object"><i class="fa fa-check"></i><b>10.5</b> object</a></li>
<li class="chapter" data-level="10.6" data-path="html-embed.html"><a href="html-embed.html#video"><i class="fa fa-check"></i><b>10.6</b> video</a></li>
<li class="chapter" data-level="10.7" data-path="html-embed.html"><a href="html-embed.html#audio"><i class="fa fa-check"></i><b>10.7</b> audio</a><ul>
<li class="chapter" data-level="10.7.1" data-path="html-embed.html"><a href="html-embed.html#设置音频播放属性"><i class="fa fa-check"></i><b>10.7.1</b> 设置音频播放属性</a></li>
<li class="chapter" data-level="10.7.2" data-path="html-embed.html"><a href="html-embed.html#指定多种音频格式"><i class="fa fa-check"></i><b>10.7.2</b> 指定多种音频格式</a></li>
</ul></li>
<li class="chapter" data-level="10.8" data-path="html-embed.html"><a href="html-embed.html#source"><i class="fa fa-check"></i><b>10.8</b> source</a></li>
<li class="chapter" data-level="10.9" data-path="html-embed.html"><a href="html-embed.html#track"><i class="fa fa-check"></i><b>10.9</b> track</a></li>
<li class="chapter" data-level="10.10" data-path="html-embed.html"><a href="html-embed.html#map"><i class="fa fa-check"></i><b>10.10</b> map</a></li>
<li class="chapter" data-level="10.11" data-path="html-embed.html"><a href="html-embed.html#area"><i class="fa fa-check"></i><b>10.11</b> area</a></li>
<li class="chapter" data-level="10.12" data-path="html-embed.html"><a href="html-embed.html#math"><i class="fa fa-check"></i><b>10.12</b> math</a></li>
<li class="chapter" data-level="10.13" data-path="html-embed.html"><a href="html-embed.html#svg"><i class="fa fa-check"></i><b>10.13</b> svg</a></li>
<li class="chapter" data-level="10.14" data-path="html-embed.html"><a href="html-embed.html#扩展阅读资料-7"><i class="fa fa-check"></i><b>10.14</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="html-table.html"><a href="html-table.html"><i class="fa fa-check"></i><b>11</b> 表格元素</a><ul>
<li class="chapter" data-level="11.1" data-path="html-table.html"><a href="html-table.html#table"><i class="fa fa-check"></i><b>11.1</b> table</a></li>
<li class="chapter" data-level="11.2" data-path="html-table.html"><a href="html-table.html#caption"><i class="fa fa-check"></i><b>11.2</b> caption</a></li>
<li class="chapter" data-level="11.3" data-path="html-table.html"><a href="html-table.html#tbody"><i class="fa fa-check"></i><b>11.3</b> tbody</a></li>
<li class="chapter" data-level="11.4" data-path="html-table.html"><a href="html-table.html#thead"><i class="fa fa-check"></i><b>11.4</b> thead</a></li>
<li class="chapter" data-level="11.5" data-path="html-table.html"><a href="html-table.html#tfoot"><i class="fa fa-check"></i><b>11.5</b> tfoot</a></li>
<li class="chapter" data-level="11.6" data-path="html-table.html"><a href="html-table.html#tr"><i class="fa fa-check"></i><b>11.6</b> tr</a></li>
<li class="chapter" data-level="11.7" data-path="html-table.html"><a href="html-table.html#td"><i class="fa fa-check"></i><b>11.7</b> td</a></li>
<li class="chapter" data-level="11.8" data-path="html-table.html"><a href="html-table.html#th"><i class="fa fa-check"></i><b>11.8</b> th</a></li>
<li class="chapter" data-level="11.9" data-path="html-table.html"><a href="html-table.html#扩展阅读资料-8"><i class="fa fa-check"></i><b>11.9</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="html-form.html"><a href="html-form.html"><i class="fa fa-check"></i><b>12</b> 表单元素</a><ul>
<li class="chapter" data-level="12.1" data-path="html-form.html"><a href="html-form.html#form"><i class="fa fa-check"></i><b>12.1</b> form</a></li>
<li class="chapter" data-level="12.2" data-path="html-form.html"><a href="html-form.html#lable"><i class="fa fa-check"></i><b>12.2</b> lable</a></li>
<li class="chapter" data-level="12.3" data-path="html-form.html"><a href="html-form.html#input"><i class="fa fa-check"></i><b>12.3</b> input</a></li>
<li class="chapter" data-level="12.4" data-path="html-form.html"><a href="html-form.html#button"><i class="fa fa-check"></i><b>12.4</b> button</a></li>
<li class="chapter" data-level="12.5" data-path="html-form.html"><a href="html-form.html#select"><i class="fa fa-check"></i><b>12.5</b> select</a></li>
<li class="chapter" data-level="12.6" data-path="html-form.html"><a href="html-form.html#datalist"><i class="fa fa-check"></i><b>12.6</b> datalist</a></li>
<li class="chapter" data-level="12.7" data-path="html-form.html"><a href="html-form.html#optgroup"><i class="fa fa-check"></i><b>12.7</b> optgroup</a></li>
<li class="chapter" data-level="12.8" data-path="html-form.html"><a href="html-form.html#option"><i class="fa fa-check"></i><b>12.8</b> option</a></li>
<li class="chapter" data-level="12.9" data-path="html-form.html"><a href="html-form.html#textarea"><i class="fa fa-check"></i><b>12.9</b> textarea</a></li>
<li class="chapter" data-level="12.10" data-path="html-form.html"><a href="html-form.html#keygen"><i class="fa fa-check"></i><b>12.10</b> keygen</a></li>
<li class="chapter" data-level="12.11" data-path="html-form.html"><a href="html-form.html#output"><i class="fa fa-check"></i><b>12.11</b> output</a></li>
<li class="chapter" data-level="12.12" data-path="html-form.html"><a href="html-form.html#progress"><i class="fa fa-check"></i><b>12.12</b> progress</a></li>
<li class="chapter" data-level="12.13" data-path="html-form.html"><a href="html-form.html#meter"><i class="fa fa-check"></i><b>12.13</b> meter</a></li>
<li class="chapter" data-level="12.14" data-path="html-form.html"><a href="html-form.html#filedset"><i class="fa fa-check"></i><b>12.14</b> filedset</a></li>
<li class="chapter" data-level="12.15" data-path="html-form.html"><a href="html-form.html#legend"><i class="fa fa-check"></i><b>12.15</b> legend</a></li>
<li class="chapter" data-level="12.16" data-path="html-form.html"><a href="html-form.html#扩展阅读资料-9"><i class="fa fa-check"></i><b>12.16</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="html-script.html"><a href="html-script.html"><i class="fa fa-check"></i><b>13</b> 脚本元素</a><ul>
<li class="chapter" data-level="13.1" data-path="html-script.html"><a href="html-script.html#script"><i class="fa fa-check"></i><b>13.1</b> script</a></li>
<li class="chapter" data-level="13.2" data-path="html-script.html"><a href="html-script.html#noscript"><i class="fa fa-check"></i><b>13.2</b> noscript</a></li>
<li class="chapter" data-level="13.3" data-path="html-script.html"><a href="html-script.html#template"><i class="fa fa-check"></i><b>13.3</b> template</a></li>
<li class="chapter" data-level="13.4" data-path="html-script.html"><a href="html-script.html#canvas"><i class="fa fa-check"></i><b>13.4</b> canvas</a></li>
<li class="chapter" data-level="13.5" data-path="html-script.html"><a href="html-script.html#扩展阅读资料-10"><i class="fa fa-check"></i><b>13.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="html-知识整理.html"><a href="html-知识整理.html"><i class="fa fa-check"></i><b>14</b> HTML 知识整理</a><ul>
<li class="chapter" data-level="14.1" data-path="html-知识整理.html"><a href="html-知识整理.html#html-nest"><i class="fa fa-check"></i><b>14.1</b> 嵌套规则</a></li>
</ul></li>
<li class="part"><span><b>II CSS</b></span></li>
<li class="chapter" data-level="15" data-path="css-intro.html"><a href="css-intro.html"><i class="fa fa-check"></i><b>15</b> CSS 简介及学习资源</a><ul>
<li class="chapter" data-level="15.1" data-path="css-intro.html"><a href="css-intro.html#使用样式表的三种方式"><i class="fa fa-check"></i><b>15.1</b> 使用样式表的三种方式</a><ul>
<li class="chapter" data-level="15.1.1" data-path="css-intro.html"><a href="css-intro.html#外部样式表"><i class="fa fa-check"></i><b>15.1.1</b> 外部样式表</a></li>
<li class="chapter" data-level="15.1.2" data-path="css-intro.html"><a href="css-intro.html#内部样式表"><i class="fa fa-check"></i><b>15.1.2</b> 内部样式表</a></li>
<li class="chapter" data-level="15.1.3" data-path="css-intro.html"><a href="css-intro.html#内嵌样式表"><i class="fa fa-check"></i><b>15.1.3</b> 内嵌样式表</a></li>
</ul></li>
<li class="chapter" data-level="15.2" data-path="css-intro.html"><a href="css-intro.html#在线学习资源及工具-1"><i class="fa fa-check"></i><b>15.2</b> 在线学习资源及工具</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="css-statement.html"><a href="css-statement.html"><i class="fa fa-check"></i><b>16</b> CSS 语法与规则</a><ul>
<li class="chapter" data-level="16.1" data-path="css-statement.html"><a href="css-statement.html#语法声明"><i class="fa fa-check"></i><b>16.1</b> 语法声明</a><ul>
<li class="chapter" data-level="16.1.1" data-path="css-statement.html"><a href="css-statement.html#at-规则"><i class="fa fa-check"></i><b>16.1.1</b> at 规则</a></li>
<li class="chapter" data-level="16.1.2" data-path="css-statement.html"><a href="css-statement.html#规则集"><i class="fa fa-check"></i><b>16.1.2</b> 规则集</a></li>
</ul></li>
<li class="chapter" data-level="16.2" data-path="css-statement.html"><a href="css-statement.html#css-注释"><i class="fa fa-check"></i><b>16.2</b> CSS 注释</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="css-selector.html"><a href="css-selector.html"><i class="fa fa-check"></i><b>17</b> CSS 选择符</a><ul>
<li class="chapter" data-level="17.1" data-path="css-selector.html"><a href="css-selector.html#简单选择符"><i class="fa fa-check"></i><b>17.1</b> 简单选择符</a><ul>
<li class="chapter" data-level="17.1.1" data-path="css-selector.html"><a href="css-selector.html#类型选择符"><i class="fa fa-check"></i><b>17.1.1</b> 类型选择符</a></li>
<li class="chapter" data-level="17.1.2" data-path="css-selector.html"><a href="css-selector.html#通配选择符"><i class="fa fa-check"></i><b>17.1.2</b> 通配选择符</a></li>
<li class="chapter" data-level="17.1.3" data-path="css-selector.html"><a href="css-selector.html#属性选择符"><i class="fa fa-check"></i><b>17.1.3</b> 属性选择符</a></li>
<li class="chapter" data-level="17.1.4" data-path="css-selector.html"><a href="css-selector.html#类选择符"><i class="fa fa-check"></i><b>17.1.4</b> 类选择符</a></li>
<li class="chapter" data-level="17.1.5" data-path="css-selector.html"><a href="css-selector.html#id-选择符"><i class="fa fa-check"></i><b>17.1.5</b> ID 选择符</a></li>
<li class="chapter" data-level="17.1.6" data-path="css-selector.html"><a href="css-selector.html#简单选择符之伪类选择符"><i class="fa fa-check"></i><b>17.1.6</b> 简单选择符之伪类选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.2" data-path="css-selector.html"><a href="css-selector.html#伪元素选择符"><i class="fa fa-check"></i><b>17.2</b> 伪元素选择符</a></li>
<li class="chapter" data-level="17.3" data-path="css-selector.html"><a href="css-selector.html#组合选择符"><i class="fa fa-check"></i><b>17.3</b> 组合选择符</a><ul>
<li class="chapter" data-level="17.3.1" data-path="css-selector.html"><a href="css-selector.html#后代选择符"><i class="fa fa-check"></i><b>17.3.1</b> 后代选择符</a></li>
<li class="chapter" data-level="17.3.2" data-path="css-selector.html"><a href="css-selector.html#子元素选择符"><i class="fa fa-check"></i><b>17.3.2</b> 子元素选择符</a></li>
<li class="chapter" data-level="17.3.3" data-path="css-selector.html"><a href="css-selector.html#相邻选择符"><i class="fa fa-check"></i><b>17.3.3</b> 相邻选择符</a></li>
<li class="chapter" data-level="17.3.4" data-path="css-selector.html"><a href="css-selector.html#兄弟选择符"><i class="fa fa-check"></i><b>17.3.4</b> 兄弟选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="css-selector.html"><a href="css-selector.html#群组选择符"><i class="fa fa-check"></i><b>17.4</b> 群组选择符</a></li>
<li class="chapter" data-level="17.5" data-path="css-selector.html"><a href="css-selector.html#参考资料"><i class="fa fa-check"></i><b>17.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="css-cascade.html"><a href="css-cascade.html"><i class="fa fa-check"></i><b>18</b> 样式级联</a><ul>
<li class="chapter" data-level="18.1" data-path="css-cascade.html"><a href="css-cascade.html#级联顺序"><i class="fa fa-check"></i><b>18.1</b> 级联顺序</a></li>
<li class="chapter" data-level="18.2" data-path="css-cascade.html"><a href="css-cascade.html#important-规则"><i class="fa fa-check"></i><b>18.2</b> !important 规则</a></li>
<li class="chapter" data-level="18.3" data-path="css-cascade.html"><a href="css-cascade.html#选择符优先级别"><i class="fa fa-check"></i><b>18.3</b> 选择符优先级别</a></li>
<li class="chapter" data-level="18.4" data-path="css-cascade.html"><a href="css-cascade.html#扩展阅读资料-11"><i class="fa fa-check"></i><b>18.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="css-unit.html"><a href="css-unit.html"><i class="fa fa-check"></i><b>19</b> CSS 的取值</a><ul>
<li class="chapter" data-level="19.1" data-path="css-unit.html"><a href="css-unit.html#长度"><i class="fa fa-check"></i><b>19.1</b> 长度</a><ul>
<li class="chapter" data-level="19.1.1" data-path="css-unit.html"><a href="css-unit.html#文本相对长度"><i class="fa fa-check"></i><b>19.1.1</b> 文本相对长度</a></li>
<li class="chapter" data-level="19.1.2" data-path="css-unit.html"><a href="css-unit.html#视图窗口相对长度"><i class="fa fa-check"></i><b>19.1.2</b> 视图窗口相对长度</a></li>
</ul></li>
<li class="chapter" data-level="19.2" data-path="css-unit.html"><a href="css-unit.html#角度"><i class="fa fa-check"></i><b>19.2</b> 角度</a></li>
<li class="chapter" data-level="19.3" data-path="css-unit.html"><a href="css-unit.html#时间"><i class="fa fa-check"></i><b>19.3</b> 时间</a></li>
<li class="chapter" data-level="19.4" data-path="css-unit.html"><a href="css-unit.html#频率"><i class="fa fa-check"></i><b>19.4</b> 频率</a></li>
<li class="chapter" data-level="19.5" data-path="css-unit.html"><a href="css-unit.html#布局"><i class="fa fa-check"></i><b>19.5</b> 布局</a></li>
<li class="chapter" data-level="19.6" data-path="css-unit.html"><a href="css-unit.html#颜色"><i class="fa fa-check"></i><b>19.6</b> 颜色</a></li>
<li class="chapter" data-level="19.7" data-path="css-unit.html"><a href="css-unit.html#数字"><i class="fa fa-check"></i><b>19.7</b> 数字</a><ul>
<li class="chapter" data-level="19.7.1" data-path="css-unit.html"><a href="css-unit.html#section-1"><i class="fa fa-check"></i><b>19.7.1</b> <number></a></li>
<li class="chapter" data-level="19.7.2" data-path="css-unit.html"><a href="css-unit.html#section-2"><i class="fa fa-check"></i><b>19.7.2</b> <integer></a></li>
<li class="chapter" data-level="19.7.3" data-path="css-unit.html"><a href="css-unit.html#section-3"><i class="fa fa-check"></i><b>19.7.3</b> <percentage></a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="20" data-path="css-text.html"><a href="css-text.html"><i class="fa fa-check"></i><b>20</b> 文本样式属性</a><ul>
<li class="chapter" data-level="20.1" data-path="css-text.html"><a href="css-text.html#设定字体"><i class="fa fa-check"></i><b>20.1</b> 设定字体</a></li>
<li class="chapter" data-level="20.2" data-path="css-text.html"><a href="css-text.html#创建斜体"><i class="fa fa-check"></i><b>20.2</b> 创建斜体</a></li>
<li class="chapter" data-level="20.3" data-path="css-text.html"><a href="css-text.html#应用粗体"><i class="fa fa-check"></i><b>20.3</b> 应用粗体</a></li>
<li class="chapter" data-level="20.4" data-path="css-text.html"><a href="css-text.html#设置字体大小"><i class="fa fa-check"></i><b>20.4</b> 设置字体大小</a></li>
<li class="chapter" data-level="20.5" data-path="css-text.html"><a href="css-text.html#设置行间距"><i class="fa fa-check"></i><b>20.5</b> 设置行间距</a></li>
<li class="chapter" data-level="20.6" data-path="css-text.html"><a href="css-text.html#同时设置所有字体值"><i class="fa fa-check"></i><b>20.6</b> 同时设置所有字体值</a></li>
<li class="chapter" data-level="20.7" data-path="css-text.html"><a href="css-text.html#设置字体颜色"><i class="fa fa-check"></i><b>20.7</b> 设置字体颜色</a></li>
<li class="chapter" data-level="20.8" data-path="css-text.html"><a href="css-text.html#控制字符间距"><i class="fa fa-check"></i><b>20.8</b> 控制字符间距</a></li>
<li class="chapter" data-level="20.9" data-path="css-text.html"><a href="css-text.html#首行缩进"><i class="fa fa-check"></i><b>20.9</b> 首行缩进</a></li>
<li class="chapter" data-level="20.10" data-path="css-text.html"><a href="css-text.html#文本对齐"><i class="fa fa-check"></i><b>20.10</b> 文本对齐</a></li>
<li class="chapter" data-level="20.11" data-path="css-text.html"><a href="css-text.html#文本装饰"><i class="fa fa-check"></i><b>20.11</b> 文本装饰</a></li>
<li class="chapter" data-level="20.12" data-path="css-text.html"><a href="css-text.html#其他文本样式"><i class="fa fa-check"></i><b>20.12</b> 其他文本样式</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="css-background.html"><a href="css-background.html"><i class="fa fa-check"></i><b>21</b> 背景</a><ul>
<li class="chapter" data-level="21.1" data-path="css-background.html"><a href="css-background.html#设置背景色"><i class="fa fa-check"></i><b>21.1</b> 设置背景色</a></li>
<li class="chapter" data-level="21.2" data-path="css-background.html"><a href="css-background.html#设置背景图片"><i class="fa fa-check"></i><b>21.2</b> 设置背景图片</a></li>
<li class="chapter" data-level="21.3" data-path="css-background.html"><a href="css-background.html#设置线性渐变背景"><i class="fa fa-check"></i><b>21.3</b> 设置线性渐变背景</a></li>
<li class="chapter" data-level="21.4" data-path="css-background.html"><a href="css-background.html#设置径向渐变"><i class="fa fa-check"></i><b>21.4</b> 设置径向渐变</a></li>
<li class="chapter" data-level="21.5" data-path="css-background.html"><a href="css-background.html#使用多个色标"><i class="fa fa-check"></i><b>21.5</b> 使用多个色标</a></li>
</ul></li>
<li class="chapter" data-level="22" data-path="css-box.html"><a href="css-box.html"><i class="fa fa-check"></i><b>22</b> 盒模型</a><ul>
<li class="chapter" data-level="22.1" data-path="css-box.html"><a href="css-box.html#盒模型的概念"><i class="fa fa-check"></i><b>22.1</b> 盒模型的概念</a></li>
<li class="chapter" data-level="22.2" data-path="css-box.html"><a href="css-box.html#设置盒子大小"><i class="fa fa-check"></i><b>22.2</b> 设置盒子大小</a></li>
<li class="chapter" data-level="22.3" data-path="css-box.html"><a href="css-box.html#设置外边距"><i class="fa fa-check"></i><b>22.3</b> 设置外边距</a></li>
<li class="chapter" data-level="22.4" data-path="css-box.html"><a href="css-box.html#设定内边距"><i class="fa fa-check"></i><b>22.4</b> 设定内边距</a></li>
<li class="chapter" data-level="22.5" data-path="css-box.html"><a href="css-box.html#设置边框"><i class="fa fa-check"></i><b>22.5</b> 设置边框</a></li>
<li class="chapter" data-level="22.6" data-path="css-box.html"><a href="css-box.html#圆角"><i class="fa fa-check"></i><b>22.6</b> 圆角</a></li>
<li class="chapter" data-level="22.7" data-path="css-box.html"><a href="css-box.html#外边距叠加"><i class="fa fa-check"></i><b>22.7</b> 外边距叠加</a><ul>
<li class="chapter" data-level="22.7.1" data-path="css-box.html"><a href="css-box.html#什么时候会发生外边距叠加"><i class="fa fa-check"></i><b>22.7.1</b> 什么时候会发生外边距叠加</a></li>
<li class="chapter" data-level="22.7.2" data-path="css-box.html"><a href="css-box.html#如何避免外边距叠加"><i class="fa fa-check"></i><b>22.7.2</b> 如何避免外边距叠加</a></li>
</ul></li>
<li class="chapter" data-level="22.8" data-path="css-box.html"><a href="css-box.html#参考资料-1"><i class="fa fa-check"></i><b>22.8</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="css-position.html"><a href="css-position.html"><i class="fa fa-check"></i><b>23</b> 定位及布局</a><ul>
<li class="chapter" data-level="23.1" data-path="css-position.html"><a href="css-position.html#信息流"><i class="fa fa-check"></i><b>23.1</b> 信息流</a></li>
<li class="chapter" data-level="23.2" data-path="css-position.html"><a href="css-position.html#display"><i class="fa fa-check"></i><b>23.2</b> display</a></li>
<li class="chapter" data-level="23.3" data-path="css-position.html"><a href="css-position.html#浮动"><i class="fa fa-check"></i><b>23.3</b> 浮动</a></li>
<li class="chapter" data-level="23.4" data-path="css-position.html"><a href="css-position.html#清除浮动"><i class="fa fa-check"></i><b>23.4</b> 清除浮动</a></li>
<li class="chapter" data-level="23.5" data-path="css-position.html"><a href="css-position.html#position"><i class="fa fa-check"></i><b>23.5</b> position</a></li>
<li class="chapter" data-level="23.6" data-path="css-position.html"><a href="css-position.html#toprightbottomleft"><i class="fa fa-check"></i><b>23.6</b> top、right、bottom、left</a></li>
<li class="chapter" data-level="23.7" data-path="css-position.html"><a href="css-position.html#clip"><i class="fa fa-check"></i><b>23.7</b> clip</a></li>
<li class="chapter" data-level="23.8" data-path="css-position.html"><a href="css-position.html#z-index"><i class="fa fa-check"></i><b>23.8</b> z-index</a></li>
<li class="chapter" data-level="23.9" data-path="css-position.html"><a href="css-position.html#css-中的居中"><i class="fa fa-check"></i><b>23.9</b> CSS 中的居中</a></li>
</ul></li>
<li class="chapter" data-level="24" data-path="css-transform.html"><a href="css-transform.html"><i class="fa fa-check"></i><b>24</b> CSS 变形</a><ul>
<li class="chapter" data-level="24.1" data-path="css-transform.html"><a href="css-transform.html#css-变形的语法"><i class="fa fa-check"></i><b>24.1</b> CSS 变形的语法</a></li>
<li class="chapter" data-level="24.2" data-path="css-transform.html"><a href="css-transform.html#d-变形"><i class="fa fa-check"></i><b>24.2</b> 2D 变形</a><ul>
<li class="chapter" data-level="24.2.1" data-path="css-transform.html"><a href="css-transform.html#d-旋转"><i class="fa fa-check"></i><b>24.2.1</b> 2D 旋转</a></li>
</ul></li>
<li class="chapter" data-level="24.3" data-path="css-transform.html"><a href="css-transform.html#d-缩放"><i class="fa fa-check"></i><b>24.3</b> 2D 缩放</a></li>
<li class="chapter" data-level="24.4" data-path="css-transform.html"><a href="css-transform.html#d-位移"><i class="fa fa-check"></i><b>24.4</b> 2D 位移</a></li>
<li class="chapter" data-level="24.5" data-path="css-transform.html"><a href="css-transform.html#d-倾斜"><i class="fa fa-check"></i><b>24.5</b> 2D 倾斜</a></li>
<li class="chapter" data-level="24.6" data-path="css-transform.html"><a href="css-transform.html#变形组合"><i class="fa fa-check"></i><b>24.6</b> 变形组合</a></li>
<li class="chapter" data-level="24.7" data-path="css-transform.html"><a href="css-transform.html#设置变形的原点"><i class="fa fa-check"></i><b>24.7</b> 设置变形的原点</a></li>
<li class="chapter" data-level="24.8" data-path="css-transform.html"><a href="css-transform.html#透视"><i class="fa fa-check"></i><b>24.8</b> 透视</a></li>
<li class="chapter" data-level="24.9" data-path="css-transform.html"><a href="css-transform.html#d-旋转-1"><i class="fa fa-check"></i><b>24.9</b> 3D 旋转</a></li>
<li class="chapter" data-level="24.10" data-path="css-transform.html"><a href="css-transform.html#d-缩放-1"><i class="fa fa-check"></i><b>24.10</b> 3D 缩放</a></li>
<li class="chapter" data-level="24.11" data-path="css-transform.html"><a href="css-transform.html#d-位移-1"><i class="fa fa-check"></i><b>24.11</b> 3D 位移</a></li>
<li class="chapter" data-level="24.12" data-path="css-transform.html"><a href="css-transform.html#变形风格"><i class="fa fa-check"></i><b>24.12</b> 变形风格</a></li>
<li class="chapter" data-level="24.13" data-path="css-transform.html"><a href="css-transform.html#背部可见性"><i class="fa fa-check"></i><b>24.13</b> 背部可见性</a></li>
</ul></li>
<li class="chapter" data-level="25" data-path="css-animate.html"><a href="css-animate.html"><i class="fa fa-check"></i><b>25</b> CSS 过渡及动画</a><ul>
<li class="chapter" data-level="25.1" data-path="css-animate.html"><a href="css-animate.html#过渡"><i class="fa fa-check"></i><b>25.1</b> 过渡</a><ul>
<li class="chapter" data-level="25.1.1" data-path="css-animate.html"><a href="css-animate.html#过渡属性"><i class="fa fa-check"></i><b>25.1.1</b> 过渡属性</a></li>
</ul></li>
<li class="chapter" data-level="25.2" data-path="css-animate.html"><a href="css-animate.html#过渡效果持续时间"><i class="fa fa-check"></i><b>25.2</b> 过渡效果持续时间</a></li>
<li class="chapter" data-level="25.3" data-path="css-animate.html"><a href="css-animate.html#过渡的缓动效果设置"><i class="fa fa-check"></i><b>25.3</b> 过渡的缓动效果设置</a></li>
<li class="chapter" data-level="25.4" data-path="css-animate.html"><a href="css-animate.html#过渡效果的延迟设置"><i class="fa fa-check"></i><b>25.4</b> 过渡效果的延迟设置</a></li>
<li class="chapter" data-level="25.5" data-path="css-animate.html"><a href="css-animate.html#过渡效果的简写"><i class="fa fa-check"></i><b>25.5</b> 过渡效果的简写</a></li>
<li class="chapter" data-level="25.6" data-path="css-animate.html"><a href="css-animate.html#变形和过渡的结合"><i class="fa fa-check"></i><b>25.6</b> 变形和过渡的结合</a></li>
<li class="chapter" data-level="25.7" data-path="css-animate.html"><a href="css-animate.html#动画"><i class="fa fa-check"></i><b>25.7</b> 动画</a><ul>
<li class="chapter" data-level="25.7.1" data-path="css-animate.html"><a href="css-animate.html#关键帧"><i class="fa fa-check"></i><b>25.7.1</b> 关键帧</a></li>
<li class="chapter" data-level="25.7.2" data-path="css-animate.html"><a href="css-animate.html#动画名称"><i class="fa fa-check"></i><b>25.7.2</b> 动画名称</a></li>
<li class="chapter" data-level="25.7.3" data-path="css-animate.html"><a href="css-animate.html#动画持续时间缓动效果及延迟"><i class="fa fa-check"></i><b>25.7.3</b> 动画持续时间、缓动效果及延迟</a></li>
<li class="chapter" data-level="25.7.4" data-path="css-animate.html"><a href="css-animate.html#动画重复次数"><i class="fa fa-check"></i><b>25.7.4</b> 动画重复次数</a></li>
<li class="chapter" data-level="25.7.5" data-path="css-animate.html"><a href="css-animate.html#动画方向"><i class="fa fa-check"></i><b>25.7.5</b> 动画方向</a></li>
<li class="chapter" data-level="25.7.6" data-path="css-animate.html"><a href="css-animate.html#动画运行状态"><i class="fa fa-check"></i><b>25.7.6</b> 动画运行状态</a></li>
<li class="chapter" data-level="25.7.7" data-path="css-animate.html"><a href="css-animate.html#动画填充模式"><i class="fa fa-check"></i><b>25.7.7</b> 动画填充模式</a></li>
<li class="chapter" data-level="25.7.8" data-path="css-animate.html"><a href="css-animate.html#动画属性简写"><i class="fa fa-check"></i><b>25.7.8</b> 动画属性简写</a></li>
</ul></li>
<li class="chapter" data-level="25.8" data-path="css-animate.html"><a href="css-animate.html#动画库-animate.css-的使用"><i class="fa fa-check"></i><b>25.8</b> 动画库 animate.css 的使用</a></li>
</ul></li>
<li class="chapter" data-level="26" data-path="flexbox.html"><a href="flexbox.html"><i class="fa fa-check"></i><b>26</b> Flexbox</a><ul>
<li class="chapter" data-level="26.1" data-path="flexbox.html"><a href="flexbox.html#基本概念"><i class="fa fa-check"></i><b>26.1</b> 基本概念</a><ul>
<li class="chapter" data-level="26.1.1" data-path="flexbox.html"><a href="flexbox.html#几个术语"><i class="fa fa-check"></i><b>26.1.1</b> 几个术语</a></li>
</ul></li>
<li class="chapter" data-level="26.2" data-path="flexbox.html"><a href="flexbox.html#flexbox容器的构造方法"><i class="fa fa-check"></i><b>26.2</b> Flexbox容器的构造方法</a></li>
<li class="chapter" data-level="26.3" data-path="flexbox.html"><a href="flexbox.html#flexbox容器特性"><i class="fa fa-check"></i><b>26.3</b> Flexbox容器特性</a><ul>
<li class="chapter" data-level="26.3.1" data-path="flexbox.html"><a href="flexbox.html#flex-direction属性"><i class="fa fa-check"></i><b>26.3.1</b> flex-direction属性</a></li>
<li class="chapter" data-level="26.3.2" data-path="flexbox.html"><a href="flexbox.html#flex-wrap属性"><i class="fa fa-check"></i><b>26.3.2</b> flex-wrap属性</a></li>
<li class="chapter" data-level="26.3.3" data-path="flexbox.html"><a href="flexbox.html#flex-flow属性"><i class="fa fa-check"></i><b>26.3.3</b> flex-flow属性</a></li>
<li class="chapter" data-level="26.3.4" data-path="flexbox.html"><a href="flexbox.html#justify-content属性"><i class="fa fa-check"></i><b>26.3.4</b> justify-content属性</a></li>
<li class="chapter" data-level="26.3.5" data-path="flexbox.html"><a href="flexbox.html#align-items属性"><i class="fa fa-check"></i><b>26.3.5</b> align-items属性</a></li>
<li class="chapter" data-level="26.3.6" data-path="flexbox.html"><a href="flexbox.html#align-content属性"><i class="fa fa-check"></i><b>26.3.6</b> align-content属性</a></li>
</ul></li>
<li class="chapter" data-level="26.4" data-path="flexbox.html"><a href="flexbox.html#flexbox项目特性"><i class="fa fa-check"></i><b>26.4</b> Flexbox项目特性</a><ul>
<li class="chapter" data-level="26.4.1" data-path="flexbox.html"><a href="flexbox.html#order属性"><i class="fa fa-check"></i><b>26.4.1</b> order属性</a></li>
<li class="chapter" data-level="26.4.2" data-path="flexbox.html"><a href="flexbox.html#flex-grow属性"><i class="fa fa-check"></i><b>26.4.2</b> flex-grow属性</a></li>
<li class="chapter" data-level="26.4.3" data-path="flexbox.html"><a href="flexbox.html#flex-shrink属性"><i class="fa fa-check"></i><b>26.4.3</b> flex-shrink属性</a></li>
<li class="chapter" data-level="26.4.4" data-path="flexbox.html"><a href="flexbox.html#flex-basis属性"><i class="fa fa-check"></i><b>26.4.4</b> flex-basis属性</a></li>
<li class="chapter" data-level="26.4.5" data-path="flexbox.html"><a href="flexbox.html#flex属性"><i class="fa fa-check"></i><b>26.4.5</b> flex属性</a></li>
<li class="chapter" data-level="26.4.6" data-path="flexbox.html"><a href="flexbox.html#align-self属性"><i class="fa fa-check"></i><b>26.4.6</b> align-self属性</a></li>
</ul></li>
<li class="chapter" data-level="26.5" data-path="flexbox.html"><a href="flexbox.html#参考资料-2"><i class="fa fa-check"></i><b>26.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="27" data-path="css-layout.html"><a href="css-layout.html"><i class="fa fa-check"></i><b>27</b> CSS layout</a><ul>
<li class="chapter" data-level="27.1" data-path="css-layout.html"><a href="css-layout.html#分栏布局"><i class="fa fa-check"></i><b>27.1</b> 分栏布局</a></li>
<li class="chapter" data-level="27.2" data-path="css-layout.html"><a href="css-layout.html#网格布局"><i class="fa fa-check"></i><b>27.2</b> 网格布局</a><ul>
<li class="chapter" data-level="27.2.1" data-path="css-layout.html"><a href="css-layout.html#指定列的数量"><i class="fa fa-check"></i><b>27.2.1</b> 指定列的数量</a></li>
<li class="chapter" data-level="27.2.2" data-path="css-layout.html"><a href="css-layout.html#网格之间的间距"><i class="fa fa-check"></i><b>27.2.2</b> 网格之间的间距</a></li>
<li class="chapter" data-level="27.2.3" data-path="css-layout.html"><a href="css-layout.html#网格的大小"><i class="fa fa-check"></i><b>27.2.3</b> 网格的大小</a></li>
<li class="chapter" data-level="27.2.4" data-path="css-layout.html"><a href="css-layout.html#基于行的位置设置"><i class="fa fa-check"></i><b>27.2.4</b> 基于行的位置设置</a></li>
<li class="chapter" data-level="27.2.5" data-path="css-layout.html"><a href="css-layout.html#网格模板区域"><i class="fa fa-check"></i><b>27.2.5</b> 网格模板区域</a></li>
</ul></li>
<li class="chapter" data-level="27.3" data-path="css-layout.html"><a href="css-layout.html#参考资料-3"><i class="fa fa-check"></i><b>27.3</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>III JavaScript</b></span></li>
<li class="chapter" data-level="28" data-path="javascript-1.html"><a href="javascript-1.html"><i class="fa fa-check"></i><b>28</b> JavaScript</a><ul>
<li class="chapter" data-level="28.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-简介"><i class="fa fa-check"></i><b>28.1</b> JavaScript 简介</a><ul>
<li class="chapter" data-level="28.1.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的特点"><i class="fa fa-check"></i><b>28.1.1</b> JavaScript 的特点</a></li>
<li class="chapter" data-level="28.1.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的用途"><i class="fa fa-check"></i><b>28.1.2</b> JavaScript 的用途</a></li>
</ul></li>
<li class="chapter" data-level="28.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-开发环境"><i class="fa fa-check"></i><b>28.2</b> JavaScript 开发环境</a></li>
<li class="chapter" data-level="28.3" data-path="javascript-1.html"><a href="javascript-1.html#javascript-语言的发展趋势"><i class="fa fa-check"></i><b>28.3</b> Javascript 语言的发展趋势</a></li>
<li class="chapter" data-level="28.4" data-path="javascript-1.html"><a href="javascript-1.html#javascript-学习资源"><i class="fa fa-check"></i><b>28.4</b> JavaScript 学习资源</a></li>
</ul></li>
<li class="chapter" data-level="29" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html"><i class="fa fa-check"></i><b>29</b> 在网页中使用 JavaScript 的方法</a><ul>
<li class="chapter" data-level="29.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#嵌入式"><i class="fa fa-check"></i><b>29.1</b> 嵌入式</a></li>
<li class="chapter" data-level="29.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#行内式"><i class="fa fa-check"></i><b>29.2</b> 行内式</a></li>
<li class="chapter" data-level="29.3" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#链接式"><i class="fa fa-check"></i><b>29.3</b> 链接式</a><ul>
<li class="chapter" data-level="29.3.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#延迟脚本-defer"><i class="fa fa-check"></i><b>29.3.1</b> 延迟脚本 defer</a></li>
<li class="chapter" data-level="29.3.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#异步脚本-async"><i class="fa fa-check"></i><b>29.3.2</b> 异步脚本 async</a></li>
</ul></li>
<li class="chapter" data-level="29.4" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#script-标签的位置"><i class="fa fa-check"></i><b>29.4</b> script 标签的位置</a></li>
<li class="chapter" data-level="29.5" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#阅读材料"><i class="fa fa-check"></i><b>29.5</b> 阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="30" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html"><i class="fa fa-check"></i><b>30</b> JavaScript 核心语法</a><ul>
<li class="chapter" data-level="30.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#区分大小写"><i class="fa fa-check"></i><b>30.1</b> 区分大小写</a></li>
<li class="chapter" data-level="30.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#注释"><i class="fa fa-check"></i><b>30.2</b> 注释</a></li>
<li class="chapter" data-level="30.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#变量"><i class="fa fa-check"></i><b>30.3</b> 变量</a></li>
<li class="chapter" data-level="30.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#分号"><i class="fa fa-check"></i><b>30.4</b> 分号</a></li>
<li class="chapter" data-level="30.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#常量"><i class="fa fa-check"></i><b>30.5</b> 常量</a></li>
<li class="chapter" data-level="30.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#运算符"><i class="fa fa-check"></i><b>30.6</b> 运算符</a><ul>
<li class="chapter" data-level="30.6.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#算术运算符"><i class="fa fa-check"></i><b>30.6.1</b> 算术运算符</a></li>
<li class="chapter" data-level="30.6.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#关系运算符"><i class="fa fa-check"></i><b>30.6.2</b> 关系运算符</a></li>
<li class="chapter" data-level="30.6.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#赋值运算符"><i class="fa fa-check"></i><b>30.6.3</b> 赋值运算符</a></li>
<li class="chapter" data-level="30.6.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#逻辑运算符"><i class="fa fa-check"></i><b>30.6.4</b> 逻辑运算符</a></li>
<li class="chapter" data-level="30.6.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#连接运算符"><i class="fa fa-check"></i><b>30.6.5</b> 连接运算符</a></li>
</ul></li>
<li class="chapter" data-level="30.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#流程控制"><i class="fa fa-check"></i><b>30.7</b> 流程控制</a><ul>
<li class="chapter" data-level="30.7.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#语句块"><i class="fa fa-check"></i><b>30.7.1</b> 语句块</a></li>
<li class="chapter" data-level="30.7.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#break"><i class="fa fa-check"></i><b>30.7.2</b> break</a></li>
<li class="chapter" data-level="30.7.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#ifelse"><i class="fa fa-check"></i><b>30.7.3</b> if…else</a></li>
<li class="chapter" data-level="30.7.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#switch"><i class="fa fa-check"></i><b>30.7.4</b> switch</a></li>
<li class="chapter" data-level="30.7.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#for"><i class="fa fa-check"></i><b>30.7.5</b> for</a></li>
<li class="chapter" data-level="30.7.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#while"><i class="fa fa-check"></i><b>30.7.6</b> while</a></li>
<li class="chapter" data-level="30.7.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#dowhile"><i class="fa fa-check"></i><b>30.7.7</b> do…while</a></li>
</ul></li>
<li class="chapter" data-level="30.8" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#函数"><i class="fa fa-check"></i><b>30.8</b> 函数</a><ul>
<li class="chapter" data-level="30.8.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#回调函数"><i class="fa fa-check"></i><b>30.8.1</b> 回调函数</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="31" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html"><i class="fa fa-check"></i><b>31</b> Javascript中的表达式和运算符</a><ul>
<li class="chapter" data-level="31.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#主要表达式"><i class="fa fa-check"></i><b>31.1</b> 主要表达式</a><ul>
<li class="chapter" data-level="31.1.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#this"><i class="fa fa-check"></i><b>31.1.1</b> <code>this</code></a></li>
<li class="chapter" data-level="31.1.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function"><i class="fa fa-check"></i><b>31.1.2</b> function</a></li>
<li class="chapter" data-level="31.1.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#class"><i class="fa fa-check"></i><b>31.1.3</b> class</a></li>
<li class="chapter" data-level="31.1.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function-1"><i class="fa fa-check"></i><b>31.1.4</b> function*</a></li>
<li class="chapter" data-level="31.1.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield"><i class="fa fa-check"></i><b>31.1.5</b> yield</a></li>
<li class="chapter" data-level="31.1.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield-1"><i class="fa fa-check"></i><b>31.1.6</b> yield*</a></li>
<li class="chapter" data-level="31.1.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#async-function"><i class="fa fa-check"></i><b>31.1.7</b> async function*</a></li>
<li class="chapter" data-level="31.1.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#await"><i class="fa fa-check"></i><b>31.1.8</b> await</a></li>
<li class="chapter" data-level="31.1.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-4"><i class="fa fa-check"></i><b>31.1.9</b> []</a></li>
<li class="chapter" data-level="31.1.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-5"><i class="fa fa-check"></i><b>31.1.10</b> </a></li>
<li class="chapter" data-level="31.1.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#abci"><i class="fa fa-check"></i><b>31.1.11</b> /ab+c/i</a></li>
<li class="chapter" data-level="31.1.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-6"><i class="fa fa-check"></i><b>31.1.12</b> ( )</a></li>
</ul></li>
<li class="chapter" data-level="31.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#左表达式"><i class="fa fa-check"></i><b>31.2</b> 左表达式</a><ul>
<li class="chapter" data-level="31.2.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#属性访问符"><i class="fa fa-check"></i><b>31.2.1</b> 属性访问符</a></li>
<li class="chapter" data-level="31.2.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new"><i class="fa fa-check"></i><b>31.2.2</b> new</a></li>
<li class="chapter" data-level="31.2.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new.target"><i class="fa fa-check"></i><b>31.2.3</b> new.target</a></li>
<li class="chapter" data-level="31.2.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#super"><i class="fa fa-check"></i><b>31.2.4</b> super</a></li>
<li class="chapter" data-level="31.2.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#obj"><i class="fa fa-check"></i><b>31.2.5</b> …obj</a></li>
</ul></li>
<li class="chapter" data-level="31.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#自增和自减"><i class="fa fa-check"></i><b>31.3</b> 自增和自减</a></li>
<li class="chapter" data-level="31.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元运算符"><i class="fa fa-check"></i><b>31.4</b> 一元运算符</a><ul>
<li class="chapter" data-level="31.4.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元正号"><i class="fa fa-check"></i><b>31.4.1</b> 一元正号</a></li>
</ul></li>
<li class="chapter" data-level="31.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#算术运算符-1"><i class="fa fa-check"></i><b>31.5</b> 算术运算符</a></li>
<li class="chapter" data-level="31.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#关系运算符-1"><i class="fa fa-check"></i><b>31.6</b> 关系运算符</a></li>
<li class="chapter" data-level="31.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#相等运算符"><i class="fa fa-check"></i><b>31.7</b> 相等运算符</a></li>
<li class="chapter" data-level="31.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#位移运算符"><i class="fa fa-check"></i><b>31.8</b> 位移运算符</a></li>
<li class="chapter" data-level="31.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二进制位运算符"><i class="fa fa-check"></i><b>31.9</b> 二进制位运算符</a></li>
<li class="chapter" data-level="31.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二元逻辑运算符"><i class="fa fa-check"></i><b>31.10</b> 二元逻辑运算符</a></li>
<li class="chapter" data-level="31.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#条件三元运算符"><i class="fa fa-check"></i><b>31.11</b> 条件(三元)运算符</a></li>
<li class="chapter" data-level="31.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#赋值运算符-1"><i class="fa fa-check"></i><b>31.12</b> 赋值运算符</a></li>
<li class="chapter" data-level="31.13" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#逗号操作符"><i class="fa fa-check"></i><b>31.13</b> 逗号操作符</a></li>
</ul></li>
<li class="chapter" data-level="32" data-path="语句和声明.html"><a href="语句和声明.html"><i class="fa fa-check"></i><b>32</b> 语句和声明</a><ul>
<li class="chapter" data-level="32.1" data-path="语句和声明.html"><a href="语句和声明.html#控制流程"><i class="fa fa-check"></i><b>32.1</b> 控制流程</a><ul>
<li class="chapter" data-level="32.1.1" data-path="语句和声明.html"><a href="语句和声明.html#块声明"><i class="fa fa-check"></i><b>32.1.1</b> 块声明</a></li>
<li class="chapter" data-level="32.1.2" data-path="语句和声明.html"><a href="语句和声明.html#break-1"><i class="fa fa-check"></i><b>32.1.2</b> break</a></li>
<li class="chapter" data-level="32.1.3" data-path="语句和声明.html"><a href="语句和声明.html#continue"><i class="fa fa-check"></i><b>32.1.3</b> continue</a></li>
<li class="chapter" data-level="32.1.4" data-path="语句和声明.html"><a href="语句和声明.html#空语句"><i class="fa fa-check"></i><b>32.1.4</b> 空语句</a></li>
<li class="chapter" data-level="32.1.5" data-path="语句和声明.html"><a href="语句和声明.html#ifelse-1"><i class="fa fa-check"></i><b>32.1.5</b> if……else</a></li>
<li class="chapter" data-level="32.1.6" data-path="语句和声明.html"><a href="语句和声明.html#switch-1"><i class="fa fa-check"></i><b>32.1.6</b> switch</a></li>
<li class="chapter" data-level="32.1.7" data-path="语句和声明.html"><a href="语句和声明.html#throw"><i class="fa fa-check"></i><b>32.1.7</b> throw</a></li>
<li class="chapter" data-level="32.1.8" data-path="语句和声明.html"><a href="语句和声明.html#trycatch"><i class="fa fa-check"></i><b>32.1.8</b> try…catch</a></li>
</ul></li>
<li class="chapter" data-level="32.2" data-path="语句和声明.html"><a href="语句和声明.html#声明"><i class="fa fa-check"></i><b>32.2</b> 声明</a><ul>
<li class="chapter" data-level="32.2.1" data-path="语句和声明.html"><a href="语句和声明.html#var-1"><i class="fa fa-check"></i><b>32.2.1</b> var</a></li>
<li class="chapter" data-level="32.2.2" data-path="语句和声明.html"><a href="语句和声明.html#let"><i class="fa fa-check"></i><b>32.2.2</b> let</a></li>
<li class="chapter" data-level="32.2.3" data-path="语句和声明.html"><a href="语句和声明.html#const"><i class="fa fa-check"></i><b>32.2.3</b> const</a></li>
</ul></li>
<li class="chapter" data-level="32.3" data-path="语句和声明.html"><a href="语句和声明.html#函数和类"><i class="fa fa-check"></i><b>32.3</b> 函数和类</a><ul>
<li class="chapter" data-level="32.3.1" data-path="语句和声明.html"><a href="语句和声明.html#function-2"><i class="fa fa-check"></i><b>32.3.1</b> function</a></li>
<li class="chapter" data-level="32.3.2" data-path="语句和声明.html"><a href="语句和声明.html#function-3"><i class="fa fa-check"></i><b>32.3.2</b> function*</a></li>
<li class="chapter" data-level="32.3.3" data-path="语句和声明.html"><a href="语句和声明.html#return"><i class="fa fa-check"></i><b>32.3.3</b> return</a></li>
<li class="chapter" data-level="32.3.4" data-path="语句和声明.html"><a href="语句和声明.html#class-1"><i class="fa fa-check"></i><b>32.3.4</b> class</a></li>
</ul></li>
<li class="chapter" data-level="32.4" data-path="语句和声明.html"><a href="语句和声明.html#迭代器"><i class="fa fa-check"></i><b>32.4</b> 迭代器</a><ul>
<li class="chapter" data-level="32.4.1" data-path="语句和声明.html"><a href="语句和声明.html#dowhile-1"><i class="fa fa-check"></i><b>32.4.1</b> do…while</a></li>
<li class="chapter" data-level="32.4.2" data-path="语句和声明.html"><a href="语句和声明.html#for-1"><i class="fa fa-check"></i><b>32.4.2</b> for</a></li>
<li class="chapter" data-level="32.4.3" data-path="语句和声明.html"><a href="语句和声明.html#for-eachin"><i class="fa fa-check"></i><b>32.4.3</b> for each…in</a></li>
<li class="chapter" data-level="32.4.4" data-path="语句和声明.html"><a href="语句和声明.html#forin"><i class="fa fa-check"></i><b>32.4.4</b> for…in</a></li>
<li class="chapter" data-level="32.4.5" data-path="语句和声明.html"><a href="语句和声明.html#forof"><i class="fa fa-check"></i><b>32.4.5</b> for…of</a></li>
<li class="chapter" data-level="32.4.6" data-path="语句和声明.html"><a href="语句和声明.html#while-1"><i class="fa fa-check"></i><b>32.4.6</b> while</a></li>
</ul></li>
<li class="chapter" data-level="32.5" data-path="语句和声明.html"><a href="语句和声明.html#其他"><i class="fa fa-check"></i><b>32.5</b> 其他</a><ul>
<li class="chapter" data-level="32.5.1" data-path="语句和声明.html"><a href="语句和声明.html#debugger"><i class="fa fa-check"></i><b>32.5.1</b> debugger</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="33" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html"><i class="fa fa-check"></i><b>33</b> JavaScript 变量类型</a><ul>
<li class="chapter" data-level="33.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#boolean布尔型"><i class="fa fa-check"></i><b>33.1</b> Boolean布尔型</a></li>
<li class="chapter" data-level="33.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#null空类型"><i class="fa fa-check"></i><b>33.2</b> Null空类型</a></li>
<li class="chapter" data-level="33.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#undefined未定义类型"><i class="fa fa-check"></i><b>33.3</b> Undefined未定义类型</a></li>
<li class="chapter" data-level="33.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#number数值型"><i class="fa fa-check"></i><b>33.4</b> Number数值型</a><ul>
<li class="chapter" data-level="33.4.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#浮点数值"><i class="fa fa-check"></i><b>33.4.1</b> 浮点数值</a></li>
<li class="chapter" data-level="33.4.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数值范围"><i class="fa fa-check"></i><b>33.4.2</b> 数值范围</a></li>
<li class="chapter" data-level="33.4.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#nan"><i class="fa fa-check"></i><b>33.4.3</b> NaN</a></li>
<li class="chapter" data-level="33.4.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转化类型"><i class="fa fa-check"></i><b>33.4.4</b> 转化类型</a></li>
</ul></li>
<li class="chapter" data-level="33.5" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#string-字符串"><i class="fa fa-check"></i><b>33.5</b> String 字符串</a><ul>
<li class="chapter" data-level="33.5.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转换为字符串"><i class="fa fa-check"></i><b>33.5.1</b> 转换为字符串</a></li>
</ul></li>
<li class="chapter" data-level="33.6" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#symbol-符号类型"><i class="fa fa-check"></i><b>33.6</b> Symbol 符号类型</a></li>
<li class="chapter" data-level="33.7" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#object-对象类型"><i class="fa fa-check"></i><b>33.7</b> Object 对象类型</a><ul>
<li class="chapter" data-level="33.7.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数组"><i class="fa fa-check"></i><b>33.7.1</b> 数组</a></li>
</ul></li>
<li class="chapter" data-level="33.8" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#查看变量类型"><i class="fa fa-check"></i><b>33.8</b> 查看变量类型</a></li>
<li class="chapter" data-level="33.9" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量类型的转换"><i class="fa fa-check"></i><b>33.9</b> 变量类型的转换</a></li>
<li class="chapter" data-level="33.10" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-object"><i class="fa fa-check"></i><b>33.10</b> JavaScript Object</a><ul>
<li class="chapter" data-level="33.10.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#对象的创建"><i class="fa fa-check"></i><b>33.10.1</b> 对象的创建</a></li>
</ul></li>
<li class="chapter" data-level="33.11" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#更改删除对象中的属性"><i class="fa fa-check"></i><b>33.11</b> 更改、删除对象中的属性</a></li>
<li class="chapter" data-level="33.12" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#为对象增加方法"><i class="fa fa-check"></i><b>33.12</b> 为对象增加方法</a></li>
<li class="chapter" data-level="33.13" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#循环输出对象的属性"><i class="fa fa-check"></i><b>33.13</b> 循环输出对象的属性</a></li>
<li class="chapter" data-level="33.14" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-函数"><i class="fa fa-check"></i><b>33.14</b> JavaScript 函数</a><ul>
<li class="chapter" data-level="33.14.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#function对象"><i class="fa fa-check"></i><b>33.14.1</b> function对象</a></li>
<li class="chapter" data-level="33.14.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数的定义"><i class="fa fa-check"></i><b>33.14.2</b> 函数的定义</a></li>
<li class="chapter" data-level="33.14.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数参数"><i class="fa fa-check"></i><b>33.14.3</b> 函数参数</a></li>
<li class="chapter" data-level="33.14.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量作用域"><i class="fa fa-check"></i><b>33.14.4</b> 变量作用域</a></li>
</ul></li>
<li class="chapter" data-level="33.15" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascrip-数组"><i class="fa fa-check"></i><b>33.15</b> JavaScrip 数组</a><ul>
<li class="chapter" data-level="33.15.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#创建数组"><i class="fa fa-check"></i><b>33.15.1</b> 创建数组</a></li>
<li class="chapter" data-level="33.15.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#访问数组元素"><i class="fa fa-check"></i><b>33.15.2</b> 访问数组元素</a></li>
<li class="chapter" data-level="33.15.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#常用属性及方法"><i class="fa fa-check"></i><b>33.15.3</b> 常用属性及方法</a></li>
<li class="chapter" data-level="33.15.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#扩展阅读资料-12"><i class="fa fa-check"></i><b>33.15.4</b> 扩展阅读资料</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="34" data-path="全局对象.html"><a href="全局对象.html"><i class="fa fa-check"></i><b>34</b> 全局对象</a><ul>
<li class="chapter" data-level="34.1" data-path="全局对象.html"><a href="全局对象.html#浏览器对象模型-bom"><i class="fa fa-check"></i><b>34.1</b> 浏览器对象模型 BOM</a><ul>
<li class="chapter" data-level="34.1.1" data-path="全局对象.html"><a href="全局对象.html#window-对象"><i class="fa fa-check"></i><b>34.1.1</b> window 对象</a></li>
<li class="chapter" data-level="34.1.2" data-path="全局对象.html"><a href="全局对象.html#控制台"><i class="fa fa-check"></i><b>34.1.2</b> 控制台</a></li>
<li class="chapter" data-level="34.1.3" data-path="全局对象.html"><a href="全局对象.html#navigator-对象"><i class="fa fa-check"></i><b>34.1.3</b> navigator 对象</a></li>
<li class="chapter" data-level="34.1.4" data-path="全局对象.html"><a href="全局对象.html#location-对象"><i class="fa fa-check"></i><b>34.1.4</b> location 对象</a></li>
<li class="chapter" data-level="34.1.5" data-path="全局对象.html"><a href="全局对象.html#screen-对象"><i class="fa fa-check"></i><b>34.1.5</b> screen 对象</a></li>
<li class="chapter" data-level="34.1.6" data-path="全局对象.html"><a href="全局对象.html#history-对象"><i class="fa fa-check"></i><b>34.1.6</b> history 对象</a></li>
<li class="chapter" data-level="34.1.7" data-path="全局对象.html"><a href="全局对象.html#document-对象"><i class="fa fa-check"></i><b>34.1.7</b> document 对象</a></li>
</ul></li>
<li class="chapter" data-level="34.2" data-path="全局对象.html"><a href="全局对象.html#dom"><i class="fa fa-check"></i><b>34.2</b> DOM</a><ul>
<li class="chapter" data-level="34.2.1" data-path="全局对象.html"><a href="全局对象.html#html-文档与-dom"><i class="fa fa-check"></i><b>34.2.1</b> HTML 文档与 DOM</a></li>
<li class="chapter" data-level="34.2.2" data-path="全局对象.html"><a href="全局对象.html#节点"><i class="fa fa-check"></i><b>34.2.2</b> 节点</a></li>
<li class="chapter" data-level="34.2.3" data-path="全局对象.html"><a href="全局对象.html#使用-dom"><i class="fa fa-check"></i><b>34.2.3</b> 使用 DOM</a></li>
</ul></li>
<li class="chapter" data-level="34.3" data-path="全局对象.html"><a href="全局对象.html#json"><i class="fa fa-check"></i><b>34.3</b> JSON</a><ul>
<li class="chapter" data-level="34.3.1" data-path="全局对象.html"><a href="全局对象.html#转义"><i class="fa fa-check"></i><b>34.3.1</b> 转义</a></li>
<li class="chapter" data-level="34.3.2" data-path="全局对象.html"><a href="全局对象.html#方法"><i class="fa fa-check"></i><b>34.3.2</b> 方法</a></li>
</ul></li>
<li class="chapter" data-level="34.4" data-path="全局对象.html"><a href="全局对象.html#参考资料-4"><i class="fa fa-check"></i><b>34.4</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="35" data-path="事件.html"><a href="事件.html"><i class="fa fa-check"></i><b>35</b> 事件</a><ul>
<li class="chapter" data-level="35.1" data-path="事件.html"><a href="事件.html#事件监听方法"><i class="fa fa-check"></i><b>35.1</b> 事件监听方法</a><ul>
<li class="chapter" data-level="35.1.1" data-path="事件.html"><a href="事件.html#通用事件监听方法"><i class="fa fa-check"></i><b>35.1.1</b> 通用事件监听方法</a></li>
<li class="chapter" data-level="35.1.2" data-path="事件.html"><a href="事件.html#dom-监听事件的方法"><i class="fa fa-check"></i><b>35.1.2</b> DOM 监听事件的方法</a></li>
</ul></li>
<li class="chapter" data-level="35.2" data-path="事件.html"><a href="事件.html#事件对象"><i class="fa fa-check"></i><b>35.2</b> 事件对象</a></li>
</ul></li>
<li class="chapter" data-level="36" data-path="javascript-进阶.html"><a href="javascript-进阶.html"><i class="fa fa-check"></i><b>36</b> JavaScript 进阶</a><ul>
<li class="chapter" data-level="36.1" data-path="javascript-进阶.html"><a href="javascript-进阶.html#错误处理"><i class="fa fa-check"></i><b>36.1</b> 错误处理</a></li>
<li class="chapter" data-level="36.2" data-path="javascript-进阶.html"><a href="javascript-进阶.html#回调函数-callback"><i class="fa fa-check"></i><b>36.2</b> 回调函数 callback</a></li>
<li class="chapter" data-level="36.3" data-path="javascript-进阶.html"><a href="javascript-进阶.html#同步与异步"><i class="fa fa-check"></i><b>36.3</b> 同步与异步</a></li>
<li class="chapter" data-level="36.4" data-path="javascript-进阶.html"><a href="javascript-进阶.html#为什么使用-promise"><i class="fa fa-check"></i><b>36.4</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="36.5" data-path="javascript-进阶.html"><a href="javascript-进阶.html#promise-对象"><i class="fa fa-check"></i><b>36.5</b> Promise 对象</a></li>
<li class="chapter" data-level="36.6" data-path="javascript-进阶.html"><a href="javascript-进阶.html#参考资料-5"><i class="fa fa-check"></i><b>36.6</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="37" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html"><i class="fa fa-check"></i><b>37</b> ECMAScript 6 简介</a><ul>
<li class="chapter" data-level="37.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#变量声明"><i class="fa fa-check"></i><b>37.1</b> 变量声明</a></li>
<li class="chapter" data-level="37.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模板字符串"><i class="fa fa-check"></i><b>37.2</b> 模板字符串</a></li>
<li class="chapter" data-level="37.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#默认参数"><i class="fa fa-check"></i><b>37.3</b> 默认参数</a></li>
<li class="chapter" data-level="37.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#箭头函数"><i class="fa fa-check"></i><b>37.4</b> 箭头函数</a></li>
<li class="chapter" data-level="37.5" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模块的导入和导出"><i class="fa fa-check"></i><b>37.5</b> 模块的导入和导出</a></li>
<li class="chapter" data-level="37.6" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#析构赋值"><i class="fa fa-check"></i><b>37.6</b> 析构赋值</a></li>
<li class="chapter" data-level="37.7" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#展开运算符"><i class="fa fa-check"></i><b>37.7</b> 展开运算符</a></li>
<li class="chapter" data-level="37.8" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise"><i class="fa fa-check"></i><b>37.8</b> Promise</a><ul>
<li class="chapter" data-level="37.8.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#回调函数-callback-1"><i class="fa fa-check"></i><b>37.8.1</b> 回调函数 callback</a></li>
<li class="chapter" data-level="37.8.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#同步与异步-1"><i class="fa fa-check"></i><b>37.8.2</b> 同步与异步</a></li>
<li class="chapter" data-level="37.8.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#为什么使用-promise-1"><i class="fa fa-check"></i><b>37.8.3</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="37.8.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise-对象-1"><i class="fa fa-check"></i><b>37.8.4</b> Promise 对象</a></li>
</ul></li>
<li class="chapter" data-level="37.9" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#参考资料-6"><i class="fa fa-check"></i><b>37.9</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>IV SVG</b></span></li>
<li class="chapter" data-level="38" data-path="svg-1.html"><a href="svg-1.html"><i class="fa fa-check"></i><b>38</b> SVG</a><ul>
<li class="chapter" data-level="38.1" data-path="svg-1.html"><a href="svg-1.html#在html中使用的方式"><i class="fa fa-check"></i><b>38.1</b> 在HTML中使用的方式</a><ul>
<li class="chapter" data-level="38.1.1" data-path="svg-1.html"><a href="svg-1.html#作为内容"><i class="fa fa-check"></i><b>38.1.1</b> 作为内容</a></li>
<li class="chapter" data-level="38.1.2" data-path="svg-1.html"><a href="svg-1.html#作为图片"><i class="fa fa-check"></i><b>38.1.2</b> 作为图片</a></li>
<li class="chapter" data-level="38.1.3" data-path="svg-1.html"><a href="svg-1.html#作为元素"><i class="fa fa-check"></i><b>38.1.3</b> 作为元素</a></li>
</ul></li>
<li class="chapter" data-level="38.2" data-path="svg-1.html"><a href="svg-1.html#基本概念-1"><i class="fa fa-check"></i><b>38.2</b> 基本概念</a><ul>
<li class="chapter" data-level="38.2.1" data-path="svg-1.html"><a href="svg-1.html#坐标系"><i class="fa fa-check"></i><b>38.2.1</b> 坐标系</a></li>
<li class="chapter" data-level="38.2.2" data-path="svg-1.html"><a href="svg-1.html#长度单位"><i class="fa fa-check"></i><b>38.2.2</b> 长度单位</a></li>
<li class="chapter" data-level="38.2.3" data-path="svg-1.html"><a href="svg-1.html#用户坐标系统"><i class="fa fa-check"></i><b>38.2.3</b> 用户坐标系统</a></li>
</ul></li>
<li class="chapter" data-level="38.3" data-path="svg-1.html"><a href="svg-1.html#形状"><i class="fa fa-check"></i><b>38.3</b> 形状</a><ul>
<li class="chapter" data-level="38.3.1" data-path="svg-1.html"><a href="svg-1.html#线-line"><i class="fa fa-check"></i><b>38.3.1</b> 线 <code>&lt;line&gt;</code></a></li>
<li class="chapter" data-level="38.3.2" data-path="svg-1.html"><a href="svg-1.html#矩形-rect"><i class="fa fa-check"></i><b>38.3.2</b> 矩形 <code>&lt;rect&gt;</code></a></li>
<li class="chapter" data-level="38.3.3" data-path="svg-1.html"><a href="svg-1.html#圆形-circle"><i class="fa fa-check"></i><b>38.3.3</b> 圆形 <code>&lt;circle&gt;</code></a></li>
<li class="chapter" data-level="38.3.4" data-path="svg-1.html"><a href="svg-1.html#椭圆-ellipse"><i class="fa fa-check"></i><b>38.3.4</b> 椭圆 <code>&lt;ellipse&gt;</code></a></li>
<li class="chapter" data-level="38.3.5" data-path="svg-1.html"><a href="svg-1.html#折线-polyline"><i class="fa fa-check"></i><b>38.3.5</b> 折线 <code>&lt;polyline&gt;</code></a></li>
<li class="chapter" data-level="38.3.6" data-path="svg-1.html"><a href="svg-1.html#多边形-polygon"><i class="fa fa-check"></i><b>38.3.6</b> 多边形 <code>&lt;polygon&gt;</code></a></li>
<li class="chapter" data-level="38.3.7" data-path="svg-1.html"><a href="svg-1.html#路径-path"><i class="fa fa-check"></i><b>38.3.7</b> 路径 <code>&lt;path&gt;</code></a></li>
</ul></li>
<li class="chapter" data-level="38.4" data-path="svg-1.html"><a href="svg-1.html#文本"><i class="fa fa-check"></i><b>38.4</b> 文本</a></li>
<li class="chapter" data-level="38.5" data-path="svg-1.html"><a href="svg-1.html#填充和边框"><i class="fa fa-check"></i><b>38.5</b> 填充和边框</a></li>
<li class="chapter" data-level="38.6" data-path="svg-1.html"><a href="svg-1.html#组合"><i class="fa fa-check"></i><b>38.6</b> 组合</a></li>
<li class="chapter" data-level="38.7" data-path="svg-1.html"><a href="svg-1.html#进阶"><i class="fa fa-check"></i><b>38.7</b> 进阶</a></li>
<li class="chapter" data-level="38.8" data-path="svg-1.html"><a href="svg-1.html#参考资料-7"><i class="fa fa-check"></i><b>38.8</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>V D3</b></span></li>
<li class="chapter" data-level="39" data-path="d3.html"><a href="d3.html"><i class="fa fa-check"></i><b>39</b> D3</a><ul>
<li class="chapter" data-level="39.1" data-path="d3.html"><a href="d3.html#d3.js-简介"><i class="fa fa-check"></i><b>39.1</b> D3.js 简介</a></li>
<li class="chapter" data-level="39.2" data-path="d3.html"><a href="d3.html#d3.js必要基础"><i class="fa fa-check"></i><b>39.2</b> D3.js必要基础</a><ul>
<li class="chapter" data-level="39.2.1" data-path="d3.html"><a href="d3.html#链式操作"><i class="fa fa-check"></i><b>39.2.1</b> 链式操作</a></li>
<li class="chapter" data-level="39.2.2" data-path="d3.html"><a href="d3.html#绑定数据"><i class="fa fa-check"></i><b>39.2.2</b> 绑定数据</a></li>
<li class="chapter" data-level="39.2.3" data-path="d3.html"><a href="d3.html#d3-selection"><i class="fa fa-check"></i><b>39.2.3</b> d3-selection</a></li>
<li class="chapter" data-level="39.2.4" data-path="d3.html"><a href="d3.html#用d3生成svg"><i class="fa fa-check"></i><b>39.2.4</b> 用d3生成svg</a></li>
</ul></li>
<li class="chapter" data-level="39.3" data-path="d3.html"><a href="d3.html#制作柱状图"><i class="fa fa-check"></i><b>39.3</b> 制作柱状图</a><ul>
<li class="chapter" data-level="39.3.1" data-path="d3.html"><a href="d3.html#准备工作"><i class="fa fa-check"></i><b>39.3.1</b> 准备工作</a></li>
<li class="chapter" data-level="39.3.2" data-path="d3.html"><a href="d3.html#准备图表所在容器"><i class="fa fa-check"></i><b>39.3.2</b> 准备图表所在容器</a></li>
<li class="chapter" data-level="39.3.3" data-path="d3.html"><a href="d3.html#设定图表大小"><i class="fa fa-check"></i><b>39.3.3</b> 设定图表大小</a></li>
<li class="chapter" data-level="39.3.4" data-path="d3.html"><a href="d3.html#准备数据"><i class="fa fa-check"></i><b>39.3.4</b> 准备数据</a></li>
<li class="chapter" data-level="39.3.5" data-path="d3.html"><a href="d3.html#在svg中加入到容器中"><i class="fa fa-check"></i><b>39.3.5</b> 在svg中加入到容器中</a></li>
<li class="chapter" data-level="39.3.6" data-path="d3.html"><a href="d3.html#在svg中加入g元素作为子容器"><i class="fa fa-check"></i><b>39.3.6</b> 在svg中加入g元素作为子容器</a></li>
<li class="chapter" data-level="39.3.7" data-path="d3.html"><a href="d3.html#添加表头"><i class="fa fa-check"></i><b>39.3.7</b> 添加表头</a></li>
<li class="chapter" data-level="39.3.8" data-path="d3.html"><a href="d3.html#创建比例尺"><i class="fa fa-check"></i><b>39.3.8</b> 创建比例尺</a></li>
<li class="chapter" data-level="39.3.9" data-path="d3.html"><a href="d3.html#添加x轴和y轴"><i class="fa fa-check"></i><b>39.3.9</b> 添加x轴和y轴</a></li>
<li class="chapter" data-level="39.3.10" data-path="d3.html"><a href="d3.html#添加放直方的容器"><i class="fa fa-check"></i><b>39.3.10</b> 添加放直方的容器</a></li>
<li class="chapter" data-level="39.3.11" data-path="d3.html"><a href="d3.html#添加数据"><i class="fa fa-check"></i><b>39.3.11</b> 添加数据</a></li>
<li class="chapter" data-level="39.3.12" data-path="d3.html"><a href="d3.html#添加说明文字"><i class="fa fa-check"></i><b>39.3.12</b> 添加说明文字</a></li>
<li class="chapter" data-level="39.3.13" data-path="d3.html"><a href="d3.html#添加hover事件"><i class="fa fa-check"></i><b>39.3.13</b> 添加hover事件</a></li>
<li class="chapter" data-level="39.3.14" data-path="d3.html"><a href="d3.html#设置样式"><i class="fa fa-check"></i><b>39.3.14</b> 设置样式</a></li>
</ul></li>
<li class="chapter" data-level="39.4" data-path="d3.html"><a href="d3.html#参考资料-8"><i class="fa fa-check"></i><b>39.4</b> 参考资料</a></li>
<li class="chapter" data-level="39.5" data-path="d3.html"><a href="d3.html#选集selection"><i class="fa fa-check"></i><b>39.5</b> 选集selection</a></li>
</ul></li>
<li class="chapter" data-level="40" data-path="d3中的选集.html"><a href="d3中的选集.html"><i class="fa fa-check"></i><b>40</b> D3中的选集</a><ul>
<li class="chapter" data-level="40.1" data-path="d3中的选集.html"><a href="d3中的选集.html#选取单个元素"><i class="fa fa-check"></i><b>40.1</b> 选取单个元素</a></li>
<li class="chapter" data-level="40.2" data-path="d3中的选集.html"><a href="d3中的选集.html#选取多个元素"><i class="fa fa-check"></i><b>40.2</b> 选取多个元素</a></li>
<li class="chapter" data-level="40.3" data-path="d3中的选集.html"><a href="d3中的选集.html#使用子选择器"><i class="fa fa-check"></i><b>40.3</b> 使用子选择器</a></li>
<li class="chapter" data-level="40.4" data-path="d3中的选集.html"><a href="d3中的选集.html#获得原始元素"><i class="fa fa-check"></i><b>40.4</b> 获得原始元素</a></li>
<li class="chapter" data-level="40.5" data-path="d3中的选集.html"><a href="d3中的选集.html#参考资料-9"><i class="fa fa-check"></i><b>40.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="41" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html"><i class="fa fa-check"></i><b>41</b> D3.js中的数据绑定与更新</a><ul>
<li class="chapter" data-level="41.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#进入更新退出模式"><i class="fa fa-check"></i><b>41.1</b> 进入—更新—退出模式</a><ul>
<li class="chapter" data-level="41.1.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#理解updateenterexit"><i class="fa fa-check"></i><b>41.1.1</b> 理解Update、Enter、Exit</a></li>
</ul></li>
<li class="chapter" data-level="41.2" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将数组绑定为数据"><i class="fa fa-check"></i><b>41.2</b> 将数组绑定为数据</a></li>
<li class="chapter" data-level="41.3" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将对象绑定为数组"><i class="fa fa-check"></i><b>41.3</b> 将对象绑定为数组</a></li>
<li class="chapter" data-level="41.4" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#打开外部数据文件"><i class="fa fa-check"></i><b>41.4</b> 打开外部数据文件</a></li>
<li class="chapter" data-level="41.5" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#参考资料-10"><i class="fa fa-check"></i><b>41.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="42" data-path="比例尺scale.html"><a href="比例尺scale.html"><i class="fa fa-check"></i><b>42</b> 比例尺Scale</a><ul>
<li class="chapter" data-level="42.1" data-path="比例尺scale.html"><a href="比例尺scale.html#连续比例尺"><i class="fa fa-check"></i><b>42.1</b> 连续比例尺</a></li>
<li class="chapter" data-level="42.2" data-path="比例尺scale.html"><a href="比例尺scale.html#序数比例尺"><i class="fa fa-check"></i><b>42.2</b> 序数比例尺</a></li>
</ul></li>
<li class="chapter" data-level="43" data-path="坐标轴.html"><a href="坐标轴.html"><i class="fa fa-check"></i><b>43</b> 坐标轴</a><ul>
<li class="chapter" data-level="43.1" data-path="坐标轴.html"><a href="坐标轴.html#d3.axisbottomscale"><i class="fa fa-check"></i><b>43.1</b> d3.axisBottom(scale)</a></li>
</ul></li>
<li class="part"><span><b>VI Node.js</b></span></li>
<li class="chapter" data-level="44" data-path="node-js.html"><a href="node-js.html"><i class="fa fa-check"></i><b>44</b> node.js</a><ul>
<li class="chapter" data-level="44.1" data-path="node-js.html"><a href="node-js.html#node.js-与-v8-引擎"><i class="fa fa-check"></i><b>44.1</b> Node.js 与 V8 引擎</a></li>
<li class="chapter" data-level="44.2" data-path="node-js.html"><a href="node-js.html#长轮询与非阻塞"><i class="fa fa-check"></i><b>44.2</b> 长轮询与非阻塞</a></li>
<li class="chapter" data-level="44.3" data-path="node-js.html"><a href="node-js.html#npm-介绍"><i class="fa fa-check"></i><b>44.3</b> NPM 介绍</a><ul>
<li class="chapter" data-level="44.3.1" data-path="node-js.html"><a href="node-js.html#安装"><i class="fa fa-check"></i><b>44.3.1</b> 安装</a></li>
<li class="chapter" data-level="44.3.2" data-path="node-js.html"><a href="node-js.html#更新"><i class="fa fa-check"></i><b>44.3.2</b> 更新</a></li>
<li class="chapter" data-level="44.3.3" data-path="node-js.html"><a href="node-js.html#常用-npm-命令"><i class="fa fa-check"></i><b>44.3.3</b> 常用 NPM 命令</a></li>
</ul></li>
<li class="chapter" data-level="44.4" data-path="node-js.html"><a href="node-js.html#node.js-起步"><i class="fa fa-check"></i><b>44.4</b> Node.js 起步</a><ul>
<li class="chapter" data-level="44.4.1" data-path="node-js.html"><a href="node-js.html#设置npm配置文件package.json"><i class="fa fa-check"></i><b>44.4.1</b> 设置NPM配置文件package.json</a></li>
</ul></li>
<li class="chapter" data-level="44.5" data-path="node-js.html"><a href="node-js.html#使用模块"><i class="fa fa-check"></i><b>44.5</b> 使用模块</a><ul>
<li class="chapter" data-level="44.5.1" data-path="node-js.html"><a href="node-js.html#使用内置的node.js模块"><i class="fa fa-check"></i><b>44.5.1</b> 使用内置的Node.js模块</a></li>
<li class="chapter" data-level="44.5.2" data-path="node-js.html"><a href="node-js.html#使用第三方node.js模块"><i class="fa fa-check"></i><b>44.5.2</b> 使用第三方Node.js模块</a></li>
<li class="chapter" data-level="44.5.3" data-path="node-js.html"><a href="node-js.html#创建并使用自定义的node.js模块"><i class="fa fa-check"></i><b>44.5.3</b> 创建并使用自定义的Node.js模块</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="45" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html"><i class="fa fa-check"></i><b>45</b> Node.js 常用核心模块</a><ul>
<li class="chapter" data-level="45.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#事件-events"><i class="fa fa-check"></i><b>45.1</b> 事件 Events</a></li>
<li class="chapter" data-level="45.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#file-system-模块"><i class="fa fa-check"></i><b>45.2</b> File System 模块</a><ul>
<li class="chapter" data-level="45.2.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#stat-获得文件信息"><i class="fa fa-check"></i><b>45.2.1</b> stat 获得文件信息</a></li>
<li class="chapter" data-level="45.2.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#mkdir"><i class="fa fa-check"></i><b>45.2.2</b> mkdir</a></li>
<li class="chapter" data-level="45.2.3" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#创建文件并写入内容"><i class="fa fa-check"></i><b>45.2.3</b> 创建文件并写入内容</a></li>
<li class="chapter" data-level="45.2.4" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#读取内容"><i class="fa fa-check"></i><b>45.2.4</b> 读取内容</a></li>
<li class="chapter" data-level="45.2.5" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#列出目录"><i class="fa fa-check"></i><b>45.2.5</b> 列出目录</a></li>
<li class="chapter" data-level="45.2.6" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#重命名"><i class="fa fa-check"></i><b>45.2.6</b> 重命名</a></li>
<li class="chapter" data-level="45.2.7" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#删除目录与文件"><i class="fa fa-check"></i><b>45.2.7</b> 删除目录与文件</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="46" data-path="buffer.html"><a href="buffer.html"><i class="fa fa-check"></i><b>46</b> buffer</a><ul>
<li class="chapter" data-level="46.1" data-path="buffer.html"><a href="buffer.html#常用属性和方法"><i class="fa fa-check"></i><b>46.1</b> 常用属性和方法</a><ul>
<li class="chapter" data-level="46.1.1" data-path="buffer.html"><a href="buffer.html#buffer.fromstring-encoding"><i class="fa fa-check"></i><b>46.1.1</b> Buffer.from(string [, encoding])</a></li>
<li class="chapter" data-level="46.1.2" data-path="buffer.html"><a href="buffer.html#buf.tostringencoding-start-end"><i class="fa fa-check"></i><b>46.1.2</b> buf.toString([encoding[, start[, end]]])</a></li>
<li class="chapter" data-level="46.1.3" data-path="buffer.html"><a href="buffer.html#buf.length"><i class="fa fa-check"></i><b>46.1.3</b> buf.length</a></li>
</ul></li>
<li class="chapter" data-level="46.2" data-path="buffer.html"><a href="buffer.html#stream"><i class="fa fa-check"></i><b>46.2</b> stream</a><ul>
<li class="chapter" data-level="46.2.1" data-path="buffer.html"><a href="buffer.html#为什么要使用流"><i class="fa fa-check"></i><b>46.2.1</b> 为什么要使用流</a></li>
<li class="chapter" data-level="46.2.2" data-path="buffer.html"><a href="buffer.html#node.js-中的流类别"><i class="fa fa-check"></i><b>46.2.2</b> Node.js 中的流类别</a></li>
<li class="chapter" data-level="46.2.3" data-path="buffer.html"><a href="buffer.html#读取文件流"><i class="fa fa-check"></i><b>46.2.3</b> 读取文件流</a></li>
<li class="chapter" data-level="46.2.4" data-path="buffer.html"><a href="buffer.html#可读流的事件"><i class="fa fa-check"></i><b>46.2.4</b> 可读流的事件</a></li>
<li class="chapter" data-level="46.2.5" data-path="buffer.html"><a href="buffer.html#写入流信息"><i class="fa fa-check"></i><b>46.2.5</b> 写入流信息</a></li>
<li class="chapter" data-level="46.2.6" data-path="buffer.html"><a href="buffer.html#管道-pipe"><i class="fa fa-check"></i><b>46.2.6</b> 管道 pipe</a></li>
</ul></li>
<li class="chapter" data-level="46.3" data-path="buffer.html"><a href="buffer.html#htpp-模块"><i class="fa fa-check"></i><b>46.3</b> HTPP 模块</a><ul>
<li class="chapter" data-level="46.3.1" data-path="buffer.html"><a href="buffer.html#http.serverresponse-类"><i class="fa fa-check"></i><b>46.3.1</b> http.ServerResponse 类</a></li>
<li class="chapter" data-level="46.3.2" data-path="buffer.html"><a href="buffer.html#创建服务器"><i class="fa fa-check"></i><b>46.3.2</b> 创建服务器</a></li>
</ul></li>
<li class="chapter" data-level="46.4" data-path="buffer.html"><a href="buffer.html#扩展阅读资料-13"><i class="fa fa-check"></i><b>46.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="47" data-path="fs-模块.html"><a href="fs-模块.html"><i class="fa fa-check"></i><b>47</b> fs 模块</a><ul>
<li class="chapter" data-level="47.1" data-path="fs-模块.html"><a href="fs-模块.html#回调函数-1"><i class="fa fa-check"></i><b>47.1</b> 回调函数</a></li>
<li class="chapter" data-level="47.2" data-path="fs-模块.html"><a href="fs-模块.html#同步与异步的区别"><i class="fa fa-check"></i><b>47.2</b> 同步与异步的区别</a></li>
<li class="chapter" data-level="47.3" data-path="fs-模块.html"><a href="fs-模块.html#使用fs模块读取文件"><i class="fa fa-check"></i><b>47.3</b> 使用fs模块读取文件</a></li>
<li class="chapter" data-level="47.4" data-path="fs-模块.html"><a href="fs-模块.html#promise对象"><i class="fa fa-check"></i><b>47.4</b> promise对象</a></li>
</ul></li>
<li class="part"><span><b>VII Vue</b></span></li>
<li class="chapter" data-level="48" data-path="vue-简介.html"><a href="vue-简介.html"><i class="fa fa-check"></i><b>48</b> Vue 简介</a><ul>
<li class="chapter" data-level="48.1" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-是什么"><i class="fa fa-check"></i><b>48.1</b> Vue.js 是什么</a></li>
<li class="chapter" data-level="48.2" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-解决了什么问题"><i class="fa fa-check"></i><b>48.2</b> Vue.js 解决了什么问题</a></li>
<li class="chapter" data-level="48.3" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-学习资源"><i class="fa fa-check"></i><b>48.3</b> Vue.js 学习资源</a></li>
<li class="chapter" data-level="48.4" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-实例对象"><i class="fa fa-check"></i><b>48.4</b> Vue.js 实例对象</a></li>
</ul></li>
<li class="chapter" data-level="49" data-path="vue-js-模板.html"><a href="vue-js-模板.html"><i class="fa fa-check"></i><b>49</b> Vue.js 模板</a><ul>
<li class="chapter" data-level="49.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素文本插值"><i class="fa fa-check"></i><b>49.1</b> 元素文本插值</a></li>
<li class="chapter" data-level="49.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素属性值"><i class="fa fa-check"></i><b>49.2</b> 元素属性值</a></li>
<li class="chapter" data-level="49.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#指令"><i class="fa fa-check"></i><b>49.3</b> 指令</a><ul>
<li class="chapter" data-level="49.3.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-text"><i class="fa fa-check"></i><b>49.3.1</b> v-text</a></li>
<li class="chapter" data-level="49.3.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-html"><i class="fa fa-check"></i><b>49.3.2</b> v-html</a></li>
<li class="chapter" data-level="49.3.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-show"><i class="fa fa-check"></i><b>49.3.3</b> v-show</a></li>
<li class="chapter" data-level="49.3.4" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-if"><i class="fa fa-check"></i><b>49.3.4</b> v-if</a></li>
<li class="chapter" data-level="49.3.5" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else"><i class="fa fa-check"></i><b>49.3.5</b> v-else</a></li>
<li class="chapter" data-level="49.3.6" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else-if"><i class="fa fa-check"></i><b>49.3.6</b> v-else-if</a></li>
<li class="chapter" data-level="49.3.7" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-for"><i class="fa fa-check"></i><b>49.3.7</b> v-for</a></li>
<li class="chapter" data-level="49.3.8" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-on"><i class="fa fa-check"></i><b>49.3.8</b> v-on</a></li>
<li class="chapter" data-level="49.3.9" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-bind"><i class="fa fa-check"></i><b>49.3.9</b> v-bind</a></li>
<li class="chapter" data-level="49.3.10" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-model"><i class="fa fa-check"></i><b>49.3.10</b> v-model</a></li>
<li class="chapter" data-level="49.3.11" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-pre"><i class="fa fa-check"></i><b>49.3.11</b> v-pre</a></li>
<li class="chapter" data-level="49.3.12" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-cloak"><i class="fa fa-check"></i><b>49.3.12</b> v-cloak</a></li>
<li class="chapter" data-level="49.3.13" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-once"><i class="fa fa-check"></i><b>49.3.13</b> v-once</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="50" data-path="vue-js-组件.html"><a href="vue-js-组件.html"><i class="fa fa-check"></i><b>50</b> Vue.js 组件</a><ul>
<li class="chapter" data-level="50.1" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的声明"><i class="fa fa-check"></i><b>50.1</b> 全局组件的声明</a></li>
<li class="chapter" data-level="50.2" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的使用"><i class="fa fa-check"></i><b>50.2</b> 全局组件的使用</a></li>
<li class="chapter" data-level="50.3" data-path="vue-js-组件.html"><a href="vue-js-组件.html#局部组件的定义及使用"><i class="fa fa-check"></i><b>50.3</b> 局部组件的定义及使用</a></li>
</ul></li>
<li class="part"><span><b>VIII Jquery</b></span></li>
<li class="chapter" data-level="51" data-path="jquery-简介.html"><a href="jquery-简介.html"><i class="fa fa-check"></i><b>51</b> jQuery 简介</a><ul>
<li class="chapter" data-level="51.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-基础概念"><i class="fa fa-check"></i><b>51.1</b> jQuery 基础概念</a><ul>
<li class="chapter" data-level="51.1.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-中的"><i class="fa fa-check"></i><b>51.1.1</b> jQuery 中的“$”</a></li>
<li class="chapter" data-level="51.1.2" data-path="jquery-简介.html"><a href="jquery-简介.html#document-.ready"><i class="fa fa-check"></i><b>51.1.2</b> <code>$( document ).ready()</code></a></li>
<li class="chapter" data-level="51.1.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-选择符"><i class="fa fa-check"></i><b>51.1.3</b> jQuery 选择符</a></li>
</ul></li>
<li class="chapter" data-level="51.2" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery的扩展选择符"><i class="fa fa-check"></i><b>51.2</b> jQuery的扩展选择符</a></li>
<li class="chapter" data-level="51.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery事件处理"><i class="fa fa-check"></i><b>51.3</b> jQuery事件处理</a><ul>
<li class="chapter" data-level="51.3.1" data-path="jquery-简介.html"><a href="jquery-简介.html#处理简单事件"><i class="fa fa-check"></i><b>51.3.1</b> 处理简单事件</a></li>
<li class="chapter" data-level="51.3.2" data-path="jquery-简介.html"><a href="jquery-简介.html#事件对象-1"><i class="fa fa-check"></i><b>51.3.2</b> 事件对象</a></li>
<li class="chapter" data-level="51.3.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-与-css"><i class="fa fa-check"></i><b>51.3.3</b> jQuery 与 CSS</a></li>
<li class="chapter" data-level="51.3.4" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery特效"><i class="fa fa-check"></i><b>51.3.4</b> jQuery特效</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="52" data-path="jquery应用案例.html"><a href="jquery应用案例.html"><i class="fa fa-check"></i><b>52</b> jQuery应用案例</a><ul>
<li class="chapter" data-level="52.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#返回顶部"><i class="fa fa-check"></i><b>52.1</b> 返回顶部</a><ul>
<li class="chapter" data-level="52.1.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理"><i class="fa fa-check"></i><b>52.1.1</b> 原理</a></li>
<li class="chapter" data-level="52.1.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码"><i class="fa fa-check"></i><b>52.1.2</b> 代码</a></li>
<li class="chapter" data-level="52.1.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析"><i class="fa fa-check"></i><b>52.1.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#图片轮播"><i class="fa fa-check"></i><b>52.2</b> 图片轮播</a><ul>
<li class="chapter" data-level="52.2.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-1"><i class="fa fa-check"></i><b>52.2.1</b> 原理</a></li>
<li class="chapter" data-level="52.2.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-1"><i class="fa fa-check"></i><b>52.2.2</b> 代码</a></li>
<li class="chapter" data-level="52.2.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-1"><i class="fa fa-check"></i><b>52.2.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#全选按钮"><i class="fa fa-check"></i><b>52.3</b> 全选按钮</a><ul>
<li class="chapter" data-level="52.3.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-2"><i class="fa fa-check"></i><b>52.3.1</b> 原理</a></li>
<li class="chapter" data-level="52.3.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-2"><i class="fa fa-check"></i><b>52.3.2</b> 代码</a></li>
<li class="chapter" data-level="52.3.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-2"><i class="fa fa-check"></i><b>52.3.3</b> 分析</a></li>
</ul></li>
</ul></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">前端开发2020版</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="jquery-简介" class="section level1">
<h1><span class="header-section-number">第 51 章</span> jQuery 简介</h1>
<blockquote>
<p>创造优美事物的方式往往不是从头做起，而是在现有成果的基础上做一些小小的调整，或者将已有的观点用比较新的方式组合起来。
保罗·格雷厄姆，《黑客与画家》</p>
</blockquote>
<p>即便掌握了 JavaScript 脚本的基本知识，开发者在使用 JavaScript 时，仍面临一个重大挑战，那就是不同浏览器对 Web 标准的支持不尽一致，往往大部分时间和精力花在解决浏览器兼容性的问题上。另外，常见的 JavaScript 应用如果在每次内容制作中都要重写的话，工作效率将是非常低下的。为此，很多开发者提供了“库”来解决上述问题。常见的 JavaScript 库有 jQuery、Prototype、Mootools 等等，经过若干年的发展和竞争，jQuery 脱颖而出，成为使用最为广泛的 JavaScript 库。可以毫不夸张地说，jQuery 的出现改变了开发者使用 JavaScript 的习惯。</p>
<p>jQuery 是一个开源免费的优秀 JavaScript 库，它能使用户更加方便地处理 HTML 文档、事件等等。jQuery 由 <a href="http://en.wikipedia.org/wiki/John_Resig">约翰·雷西格（John Resig）</a> 于 2006 年创建，从最初的增强 CSS 选择器功能，发展至今，功能日益丰富：</p>
<ul>
<li>jQuery 大大简化了选取 DOM 局部内容的步骤，可以灵活高效地选择页面内容。</li>
<li>引入 jQuery 后，开发人员不再需要考虑复杂的浏览器兼容问题，可以更加轻松地处理事件，提高脚本的稳定性。</li>
<li>jQuery 内置了可自定义参数的动画效果，简化了应用动画效果的过程。</li>
<li>jQuery 还提供了很多附加的功能简化了常用的 JavaScript 操作。</li>
<li>jQuery 使用最新的 CSS3 标准，即便不支持 CSS3 的浏览器，也能通过脚本达到 CSS3 的效果，极大地丰富网页的表现形式。</li>
<li>jQuery 提供了一整套 Ajax 相关操作的方法，大大方便了异步交互的开发和使用。</li>
</ul>
<p>此外，jQuery 是一个开源软件，围绕着 jQuery 已经建立了良好的“生态系统”，用户众多，文档齐全，学习成本较低。同时还有许多成熟的插件可供选择。</p>
<p>学习 jQuery，最好的资源还是 <a href="http://api.jquery.com/">官方文档</a>。此外，还有 <a href="http://www.jquery123.com/">非官方的中文社区</a>。</p>
<p>在 jQuery 官方网站下载最新版的 jQuery，将其放置在合适的目录中，然后在 HTML 文档中使用 script 元素引用 jQuery 库，即可使用 jQuery 提供的强大方便的功能。</p>
<div class="sourceCode" id="cb470"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb470-1"><a href="jquery-简介.html#cb470-1"></a><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-3.2.1.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span></code></pre></div>
<div id="jquery-基础概念" class="section level2">
<h2><span class="header-section-number">51.1</span> jQuery 基础概念</h2>
<p>下面，我们将介绍几个 jQuery 中的重要概念，这些概念将有助于理解 jQuery 的设计理念。</p>
<div id="jquery-中的" class="section level3">
<h3><span class="header-section-number">51.1.1</span> jQuery 中的“$”</h3>
<p>在 jQuery 中，最频繁使用的莫过于美元符号“<span class="math inline">\(”，在 jQuery 中，美元符号“\)</span>”等同于“jQuery”，表示 jQuery 对象。
jQuery 对象就是通过 jQuery 包装 DOM 对象之后产生的对象。为了方便代码的编写，通常采用“$”代替“jQuery”。“$”提供了丰富的功能，包括选择页面中的元素、作为功能函数的前缀、window.onload 的改进、创建 DOM 等等。一定要注意，在 jQuery 对象中无法直接使用原生 JavaScript 中 DOM 对象的方法和属性，但可使用 get(index) 方法将 jQuery 对象转化为 DOM 对象。</p>
</div>
<div id="document-.ready" class="section level3">
<h3><span class="header-section-number">51.1.2</span> <code>$( document ).ready()</code></h3>
<p>浏览器载入 HTML 文档并不是一次性全部载入的，而是从上到下依次载入。但我们的脚本可能就在文档的顶端或者中间，当脚本已经载入，但 HTML 文档还没有完全载入完毕时，脚本去处理还没有载入的 DOM 时会产生无效或者错误结果。为了解决这一问题，人们想出了一些方案：</p>
<ul>
<li>将脚本放在页面最下面。 这种方案在大多数时候是有效的，但是有的时候，创作者并没有能将脚本放在页面底部的权限或者可能性。例如，在大多数 CMS 中，普通编辑人员只能就文档的局部内容进行修改，整体文档的生成则是不同部门的合作结果。想象一下淘宝、天猫的首页、门户网站的首页等等皆是如此。</li>
<li>使用<code>window.onload</code>事件。<code>window.onload</code>会在页面所有元素都载入后触发，当页面中有大量图片或者视频时，触发的时机有些过晚。还有，<code>window.onload</code>只能使用一次，当页面中的多个脚本调用<code>window.onload</code>时会产生冲突。</li>
</ul>
<p>jQuery 中的<code>ready()</code>方法很好地解决了上述问题，它能够自动将其中的函数在页面加载（实际上是 DOM 准备完毕后）完成后运行。并且同一个页面可以使用多个<code>ready()</code>方法，而且互不冲突。<code>$( document ).ready()</code>可简写为下面的代码，将演示<code>$( document ).ready()</code>和<code>window.onload</code>的区别：</p>
<div class="sourceCode" id="cb471"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb471-1"><a href="jquery-简介.html#cb471-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb471-2"><a href="jquery-简介.html#cb471-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb471-3"><a href="jquery-简介.html#cb471-3"></a></span>
<span id="cb471-4"><a href="jquery-简介.html#cb471-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb471-5"><a href="jquery-简介.html#cb471-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb471-6"><a href="jquery-简介.html#cb471-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb471-7"><a href="jquery-简介.html#cb471-7"></a>    <span class="kw">&lt;title&gt;</span>jQuery 中的 ready 方法&lt;/title&gt;</span>
<span id="cb471-8"><a href="jquery-简介.html#cb471-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-3.2.1.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb471-9"><a href="jquery-简介.html#cb471-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb471-10"><a href="jquery-简介.html#cb471-10"></a>    body {</span>
<span id="cb471-11"><a href="jquery-简介.html#cb471-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb471-12"><a href="jquery-简介.html#cb471-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb471-13"><a href="jquery-简介.html#cb471-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb471-14"><a href="jquery-简介.html#cb471-14"></a>    }</span>
<span id="cb471-15"><a href="jquery-简介.html#cb471-15"></a></span>
<span id="cb471-16"><a href="jquery-简介.html#cb471-16"></a>    h1 {</span>
<span id="cb471-17"><a href="jquery-简介.html#cb471-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb471-18"><a href="jquery-简介.html#cb471-18"></a>    }</span>
<span id="cb471-19"><a href="jquery-简介.html#cb471-19"></a></span>
<span id="cb471-20"><a href="jquery-简介.html#cb471-20"></a>    p {</span>
<span id="cb471-21"><a href="jquery-简介.html#cb471-21"></a>        <span class="kw">font-size</span>: <span class="dv">20</span><span class="op">;</span></span>
<span id="cb471-22"><a href="jquery-简介.html#cb471-22"></a>        <span class="kw">padding</span>: <span class="dv">5</span><span class="dt">px</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb471-23"><a href="jquery-简介.html#cb471-23"></a>    }</span>
<span id="cb471-24"><a href="jquery-简介.html#cb471-24"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb471-25"><a href="jquery-简介.html#cb471-25"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb471-26"><a href="jquery-简介.html#cb471-26"></a>    <span class="at">$</span>(document).<span class="at">ready</span>(</span>
<span id="cb471-27"><a href="jquery-简介.html#cb471-27"></a>        <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb471-28"><a href="jquery-简介.html#cb471-28"></a>            <span class="va">console</span>.<span class="at">log</span>(<span class="st">&quot;document.ready() 第一次触发&quot;</span>)<span class="op">;</span></span>
<span id="cb471-29"><a href="jquery-简介.html#cb471-29"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb471-30"><a href="jquery-简介.html#cb471-30"></a>    <span class="co">// jQuery 中的 ready 方法可以多次调用，互不冲突</span></span>
<span id="cb471-31"><a href="jquery-简介.html#cb471-31"></a>    <span class="at">$</span>(document).<span class="at">ready</span>(</span>
<span id="cb471-32"><a href="jquery-简介.html#cb471-32"></a>        <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb471-33"><a href="jquery-简介.html#cb471-33"></a>            <span class="va">console</span>.<span class="at">log</span>(<span class="st">&quot;document.ready() 第二次触发&quot;</span>)<span class="op">;</span></span>
<span id="cb471-34"><a href="jquery-简介.html#cb471-34"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb471-35"><a href="jquery-简介.html#cb471-35"></a>    <span class="co">// $( document ).ready() 可简写为$()。</span></span>
<span id="cb471-36"><a href="jquery-简介.html#cb471-36"></a>    <span class="at">$</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb471-37"><a href="jquery-简介.html#cb471-37"></a>        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&quot;document.ready() 第一次触发&quot;</span>)<span class="op">;</span></span>
<span id="cb471-38"><a href="jquery-简介.html#cb471-38"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb471-39"><a href="jquery-简介.html#cb471-39"></a></span>
<span id="cb471-40"><a href="jquery-简介.html#cb471-40"></a>    <span class="va">window</span>.<span class="at">onload</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb471-41"><a href="jquery-简介.html#cb471-41"></a>        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&quot;window onload 事件第一次触发&quot;</span>)<span class="op">;</span></span>
<span id="cb471-42"><a href="jquery-简介.html#cb471-42"></a>    <span class="op">};</span></span>
<span id="cb471-43"><a href="jquery-简介.html#cb471-43"></a></span>
<span id="cb471-44"><a href="jquery-简介.html#cb471-44"></a>    <span class="co">// window.onload 事件多次调用会产生冲突，只执行最后一次的 onload</span></span>
<span id="cb471-45"><a href="jquery-简介.html#cb471-45"></a>    <span class="va">window</span>.<span class="at">onload</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb471-46"><a href="jquery-简介.html#cb471-46"></a>        <span class="va">console</span>.<span class="at">log</span>(<span class="st">&quot;window onload 事件第二次触发&quot;</span>)<span class="op">;</span></span>
<span id="cb471-47"><a href="jquery-简介.html#cb471-47"></a>    <span class="op">};</span></span>
<span id="cb471-48"><a href="jquery-简介.html#cb471-48"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb471-49"><a href="jquery-简介.html#cb471-49"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb471-50"><a href="jquery-简介.html#cb471-50"></a></span>
<span id="cb471-51"><a href="jquery-简介.html#cb471-51"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb471-52"><a href="jquery-简介.html#cb471-52"></a>    <span class="kw">&lt;h1&gt;</span>jQuery 中的 ready 方法&lt;/h1&gt;</span>
<span id="cb471-53"><a href="jquery-简介.html#cb471-53"></a>    <span class="kw">&lt;iframe</span><span class="ot"> src=</span><span class="st">&quot;http://cn.bing.com&quot;</span><span class="kw">&gt;&lt;/iframe&gt;</span></span>
<span id="cb471-54"><a href="jquery-简介.html#cb471-54"></a>    <span class="kw">&lt;p&gt;</span>请打开控制台查看输出效果<span class="kw">&lt;/p&gt;</span></span>
<span id="cb471-55"><a href="jquery-简介.html#cb471-55"></a>    <span class="co">&lt;!-- &lt;script src=&quot;js/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span id="cb471-56"><a href="jquery-简介.html#cb471-56"></a>    <span class="co">&lt;!-- jQuery 库引用位置如果放在这里，则之前的 jQuery 代码出错 --&gt;</span></span>
<span id="cb471-57"><a href="jquery-简介.html#cb471-57"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb471-58"><a href="jquery-简介.html#cb471-58"></a></span>
<span id="cb471-59"><a href="jquery-简介.html#cb471-59"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>上面的页面运行后，我们在浏览器控制台中可以看到<code>$( document ).ready()</code>方法运行的三个结果，而<code>window.onload</code>事件虽然脚本中设置了两次，但输出的结果只有一个，而使用 jQuery 的 ready 方法则可多次使用。</p>
</div>
<div id="jquery-选择符" class="section level3">
<h3><span class="header-section-number">51.1.3</span> jQuery 选择符</h3>
<p>在 CSS 中，选择符的作用是选择页面中的某些元素，例如，在 CSS 中，我们可以使用 id 选择符选择特定的元素，然后为其添加样式：</p>
<div class="sourceCode" id="cb472"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb472-1"><a href="jquery-简介.html#cb472-1"></a><span class="pp">#demo</span> {</span>
<span id="cb472-2"><a href="jquery-简介.html#cb472-2"></a>    <span class="kw">color</span>:<span class="cn">red</span><span class="op">;</span></span>
<span id="cb472-3"><a href="jquery-简介.html#cb472-3"></a>}</span></code></pre></div>
<p>虽然 CSS3 提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际 CSS 开发中很少用到。而在 jQuery 中，“$”也能使用 CSS 中的选择符，达到选择特定元素的目的。而且，jQuery 中的选择符已经为用户处理了繁琐复杂的浏览器兼容性问题。</p>
<div class="sourceCode" id="cb473"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb473-1"><a href="jquery-简介.html#cb473-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb473-2"><a href="jquery-简介.html#cb473-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb473-3"><a href="jquery-简介.html#cb473-3"></a></span>
<span id="cb473-4"><a href="jquery-简介.html#cb473-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb473-5"><a href="jquery-简介.html#cb473-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb473-6"><a href="jquery-简介.html#cb473-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb473-7"><a href="jquery-简介.html#cb473-7"></a>    <span class="kw">&lt;title&gt;</span>jQuery 中 CSS 选择符的用法&lt;/title&gt;</span>
<span id="cb473-8"><a href="jquery-简介.html#cb473-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb473-9"><a href="jquery-简介.html#cb473-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb473-10"><a href="jquery-简介.html#cb473-10"></a>    body {</span>
<span id="cb473-11"><a href="jquery-简介.html#cb473-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb473-12"><a href="jquery-简介.html#cb473-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb473-13"><a href="jquery-简介.html#cb473-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb473-14"><a href="jquery-简介.html#cb473-14"></a>    }</span>
<span id="cb473-15"><a href="jquery-简介.html#cb473-15"></a></span>
<span id="cb473-16"><a href="jquery-简介.html#cb473-16"></a>    h1 {</span>
<span id="cb473-17"><a href="jquery-简介.html#cb473-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb473-18"><a href="jquery-简介.html#cb473-18"></a>    }</span>
<span id="cb473-19"><a href="jquery-简介.html#cb473-19"></a></span>
<span id="cb473-20"><a href="jquery-简介.html#cb473-20"></a>    <span class="fu">.red</span> {</span>
<span id="cb473-21"><a href="jquery-简介.html#cb473-21"></a>        <span class="kw">color</span>: <span class="cn">red</span><span class="op">;</span></span>
<span id="cb473-22"><a href="jquery-简介.html#cb473-22"></a>    }</span>
<span id="cb473-23"><a href="jquery-简介.html#cb473-23"></a></span>
<span id="cb473-24"><a href="jquery-简介.html#cb473-24"></a>    <span class="fu">.center</span> {</span>
<span id="cb473-25"><a href="jquery-简介.html#cb473-25"></a>        <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb473-26"><a href="jquery-简介.html#cb473-26"></a>    }</span>
<span id="cb473-27"><a href="jquery-简介.html#cb473-27"></a></span>
<span id="cb473-28"><a href="jquery-简介.html#cb473-28"></a>    <span class="fu">.even</span> {</span>
<span id="cb473-29"><a href="jquery-简介.html#cb473-29"></a>        <span class="kw">background-color</span>: <span class="cn">#ccc</span><span class="op">;</span></span>
<span id="cb473-30"><a href="jquery-简介.html#cb473-30"></a>    }</span>
<span id="cb473-31"><a href="jquery-简介.html#cb473-31"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb473-32"><a href="jquery-简介.html#cb473-32"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb473-33"><a href="jquery-简介.html#cb473-33"></a>    <span class="at">jQuery</span>(document).<span class="at">ready</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb473-34"><a href="jquery-简介.html#cb473-34"></a>        <span class="co">// jQuery 能使用 CSS 选择符选择特定的元素</span></span>
<span id="cb473-35"><a href="jquery-简介.html#cb473-35"></a>        <span class="at">$</span>(<span class="st">&quot;#demo&quot;</span>).<span class="at">addClass</span>(<span class="st">&#39;red&#39;</span>)<span class="op">;</span></span>
<span id="cb473-36"><a href="jquery-简介.html#cb473-36"></a>        <span class="co">// :contains() 选择符</span></span>
<span id="cb473-37"><a href="jquery-简介.html#cb473-37"></a>        <span class="at">$</span>(<span class="st">&quot;p:contains(&#39;.contains&#39;)&quot;</span>).<span class="at">addClass</span>(<span class="st">&#39;red&#39;</span>)<span class="op">;</span></span>
<span id="cb473-38"><a href="jquery-简介.html#cb473-38"></a>        <span class="co">// :eq() 选择符</span></span>
<span id="cb473-39"><a href="jquery-简介.html#cb473-39"></a>        <span class="at">$</span>(<span class="st">&#39;p:eq(1)&#39;</span>).<span class="at">addClass</span>(<span class="st">&#39;center&#39;</span>)<span class="op">;</span></span>
<span id="cb473-40"><a href="jquery-简介.html#cb473-40"></a>        <span class="at">$</span>(<span class="st">&#39;li:gt(0)&#39;</span>).<span class="at">css</span>(<span class="st">&#39;backgroundColor&#39;</span><span class="op">,</span> <span class="st">&#39;yellow&#39;</span>)<span class="op">;</span></span>
<span id="cb473-41"><a href="jquery-简介.html#cb473-41"></a>        <span class="at">$</span>(<span class="st">&#39;li:lt(1)&#39;</span>).<span class="at">css</span>(<span class="st">&#39;backgroundColor&#39;</span><span class="op">,</span> <span class="st">&#39;yellow&#39;</span>)<span class="op">;</span></span>
<span id="cb473-42"><a href="jquery-简介.html#cb473-42"></a>        <span class="at">$</span>(<span class="st">&#39;div:has(&quot;p&quot;)&#39;</span>).<span class="at">addClass</span>(<span class="st">&#39;red&#39;</span>)<span class="op">;</span></span>
<span id="cb473-43"><a href="jquery-简介.html#cb473-43"></a>        <span class="at">$</span>(<span class="st">&quot;:header&quot;</span>).<span class="at">css</span>(<span class="st">&#39;backgroundColor&#39;</span><span class="op">,</span> <span class="st">&#39;yellow&#39;</span>)<span class="op">;</span></span>
<span id="cb473-44"><a href="jquery-简介.html#cb473-44"></a>        <span class="at">$</span>(<span class="st">&quot;tr:even&quot;</span>).<span class="at">addClass</span>(<span class="st">&#39;even&#39;</span>)<span class="op">;</span></span>
<span id="cb473-45"><a href="jquery-简介.html#cb473-45"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb473-46"><a href="jquery-简介.html#cb473-46"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb473-47"><a href="jquery-简介.html#cb473-47"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb473-48"><a href="jquery-简介.html#cb473-48"></a></span>
<span id="cb473-49"><a href="jquery-简介.html#cb473-49"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb473-50"><a href="jquery-简介.html#cb473-50"></a>    <span class="kw">&lt;h1</span><span class="ot"> id=</span><span class="st">&quot;demo&quot;</span><span class="ot"> class=</span><span class="st">&quot;center&quot;</span><span class="kw">&gt;</span>jQuery 使用 CSS 选择符选择特定节点<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb473-51"><a href="jquery-简介.html#cb473-51"></a>    <span class="kw">&lt;p&gt;</span>jQuery 使用 CSS 中的选择符，比如 ID 选择符，选择特定节点。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb473-52"><a href="jquery-简介.html#cb473-52"></a>    <span class="kw">&lt;p&gt;</span>jQuery 还可以使用。contains() 选择含有特定内容的元素。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb473-53"><a href="jquery-简介.html#cb473-53"></a>    <span class="kw">&lt;ul&gt;</span></span>
<span id="cb473-54"><a href="jquery-简介.html#cb473-54"></a>        <span class="kw">&lt;li&gt;</span>:eq()<span class="kw">&lt;/li&gt;</span></span>
<span id="cb473-55"><a href="jquery-简介.html#cb473-55"></a>        <span class="kw">&lt;li&gt;</span>:gt()<span class="kw">&lt;/li&gt;</span></span>
<span id="cb473-56"><a href="jquery-简介.html#cb473-56"></a>        <span class="kw">&lt;li&gt;</span>:lt()<span class="kw">&lt;/li&gt;</span></span>
<span id="cb473-57"><a href="jquery-简介.html#cb473-57"></a>    <span class="kw">&lt;/ul&gt;</span></span>
<span id="cb473-58"><a href="jquery-简介.html#cb473-58"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb473-59"><a href="jquery-简介.html#cb473-59"></a>        <span class="kw">&lt;p&gt;</span>jQuery 中新增了：has() 选择符<span class="kw">&lt;/p&gt;</span></span>
<span id="cb473-60"><a href="jquery-简介.html#cb473-60"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb473-61"><a href="jquery-简介.html#cb473-61"></a>    <span class="kw">&lt;h2&gt;</span>jQuery 可通过：header 选择所有的标题元素<span class="kw">&lt;/h2&gt;</span></span>
<span id="cb473-62"><a href="jquery-简介.html#cb473-62"></a>    <span class="kw">&lt;table&gt;</span></span>
<span id="cb473-63"><a href="jquery-简介.html#cb473-63"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb473-64"><a href="jquery-简介.html#cb473-64"></a>            <span class="kw">&lt;td&gt;</span>单元格<span class="kw">&lt;/td&gt;</span></span>
<span id="cb473-65"><a href="jquery-简介.html#cb473-65"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb473-66"><a href="jquery-简介.html#cb473-66"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb473-67"><a href="jquery-简介.html#cb473-67"></a>            <span class="kw">&lt;td&gt;</span>单元格<span class="kw">&lt;/td&gt;</span></span>
<span id="cb473-68"><a href="jquery-简介.html#cb473-68"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb473-69"><a href="jquery-简介.html#cb473-69"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb473-70"><a href="jquery-简介.html#cb473-70"></a>            <span class="kw">&lt;td&gt;</span>单元格<span class="kw">&lt;/td&gt;</span></span>
<span id="cb473-71"><a href="jquery-简介.html#cb473-71"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb473-72"><a href="jquery-简介.html#cb473-72"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb473-73"><a href="jquery-简介.html#cb473-73"></a>            <span class="kw">&lt;td&gt;</span>单元格<span class="kw">&lt;/td&gt;</span></span>
<span id="cb473-74"><a href="jquery-简介.html#cb473-74"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb473-75"><a href="jquery-简介.html#cb473-75"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb473-76"><a href="jquery-简介.html#cb473-76"></a>            <span class="kw">&lt;td&gt;</span>单元格<span class="kw">&lt;/td&gt;</span></span>
<span id="cb473-77"><a href="jquery-简介.html#cb473-77"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb473-78"><a href="jquery-简介.html#cb473-78"></a>    <span class="kw">&lt;/table&gt;</span></span>
<span id="cb473-79"><a href="jquery-简介.html#cb473-79"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb473-80"><a href="jquery-简介.html#cb473-80"></a></span>
<span id="cb473-81"><a href="jquery-简介.html#cb473-81"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>上例的运行结果显示：</p>
<ul>
<li>CSS 选择符确实可以在 jQuery 中使用。事实上 jQuery 通过预先的编程，提供了几乎所有 CSS3 标准下的选择器。</li>
<li>jQuery 还提供了 CSS 机制中没有的选择符。</li>
</ul>
</div>
</div>
<div id="jquery的扩展选择符" class="section level2">
<h2><span class="header-section-number">51.2</span> jQuery的扩展选择符</h2>
<p>jQuery作为JavaScript库，是用来处理网页中的内容，实现特定效果的。要改变网页的内容，首先得选择网页的内容，原生JavaScript对DOM进行操作前，也得通过类似于<code>getElementsByTagName()</code>的方法得到DOM的某个部分。而jQuery在CSS选择符基础上，又额外增加了一些选择符，使得jQuery的选择符功能非常强大。下面就介绍CSS选择符之外，jQuery增加的选择符有：</p>
<ul>
<li><code>:animated</code> 选择所有正在执行动画效果的元素。</li>
<li><code>[name!="value"]</code> 选择不存在指定属性，或者指定的属性值不等于给定值的元素。</li>
<li><code>:button</code> 选择所有按钮元素和类型为按钮的元素。</li>
<li><code>:checkbox</code> 选择所有类型为复选框的元素。</li>
<li><code>:contains()</code> 选择包含特定文本内容的所有元素。</li>
<li><code>:eq()</code> 选择节点列表中的第n个元素（起始数字为0），如果n为负值，表示从后往前。<code>:eq()</code>选择符相当于CSS选择符中的<code>:nth-child()</code>、<code>:nth-last-child()</code>。</li>
<li><code>:even</code> 选择所引值为偶数的元素，从 0 开始计数。</li>
<li><code>:file</code> 选择所有类型为文件（file）的元素。</li>
<li><code>:first</code> 选择第一个匹配的元素。</li>
<li><code>:gt()</code> 选择节点列表中的第n个元素以上的所有元素，如果n为负值，表示从后往前。</li>
<li><code>:has()</code> 选择至少含有一个指定元素的所有父元素。</li>
<li><code>:header</code> 选择所有的标题元素，比如h1、h2等等。</li>
<li><code>:hidden</code> 选择所有隐藏的元素。</li>
<li><code>:input</code>选择所有 <code>input</code>, <code>textarea</code>, <code>select</code> 和 <code>button</code> 元素.</li>
<li><code>:last</code> 选择最后一个匹配的元素。</li>
<li><code>:lt()</code> 选择节点列表中的第n个元素以上的所有元素，如果n为负值，表示从后往前。</li>
<li><code>:odd</code> 选择索引值为奇数元素，从 0 开始计数。</li>
<li><code>:parent</code> 选择所有含有子元素或者文本的父级元素。</li>
<li><code>:password</code> 选择所有类型为密码的元素。</li>
<li><code>:radio</code> 选择所有类型为单选框的元素。</li>
<li><code>:reset</code> 选择所有类型为重置的元素。</li>
<li><code>:selected</code> 获取 <code>select</code> 元素中所有被选中的元素。</li>
<li><code>:submit</code> 选择所有类型为提交的元素。</li>
<li><code>:text</code> 选择所有类型为文本的元素。</li>
<li><code>:visible</code> 选择所有可见的元素。</li>
</ul>
<p>除了CSS选择符及jQuery扩展的选择符之外，jQuery还提供了一个功能强大的<code>filter()</code>方法，该方法的参数既可以是选择符，还可以是一个函数。作为<code>filter()</code>参数的函数，其返回值必须是布尔值，<code>filter()</code>方法会逐一在选择结果中执行函数，最终对结果集进行过滤。</p>
<p>下面的案例，用以演示<code>filter()</code>的用法：</p>
<div class="sourceCode" id="cb474"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb474-1"><a href="jquery-简介.html#cb474-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb474-2"><a href="jquery-简介.html#cb474-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb474-3"><a href="jquery-简介.html#cb474-3"></a></span>
<span id="cb474-4"><a href="jquery-简介.html#cb474-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb474-5"><a href="jquery-简介.html#cb474-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb474-6"><a href="jquery-简介.html#cb474-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb474-7"><a href="jquery-简介.html#cb474-7"></a>    <span class="kw">&lt;title&gt;</span>jQuery中filter方法&lt;/title&gt;</span>
<span id="cb474-8"><a href="jquery-简介.html#cb474-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb474-9"><a href="jquery-简介.html#cb474-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb474-10"><a href="jquery-简介.html#cb474-10"></a>    body {</span>
<span id="cb474-11"><a href="jquery-简介.html#cb474-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb474-12"><a href="jquery-简介.html#cb474-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb474-13"><a href="jquery-简介.html#cb474-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb474-14"><a href="jquery-简介.html#cb474-14"></a>    }</span>
<span id="cb474-15"><a href="jquery-简介.html#cb474-15"></a></span>
<span id="cb474-16"><a href="jquery-简介.html#cb474-16"></a>    h1 {</span>
<span id="cb474-17"><a href="jquery-简介.html#cb474-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb474-18"><a href="jquery-简介.html#cb474-18"></a>    }</span>
<span id="cb474-19"><a href="jquery-简介.html#cb474-19"></a></span>
<span id="cb474-20"><a href="jquery-简介.html#cb474-20"></a>    <span class="fu">.info</span> {</span>
<span id="cb474-21"><a href="jquery-简介.html#cb474-21"></a>        <span class="kw">background-color</span>: <span class="cn">yellow</span><span class="op">;</span></span>
<span id="cb474-22"><a href="jquery-简介.html#cb474-22"></a>    }</span>
<span id="cb474-23"><a href="jquery-简介.html#cb474-23"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb474-24"><a href="jquery-简介.html#cb474-24"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb474-25"><a href="jquery-简介.html#cb474-25"></a>    <span class="at">jQuery</span>(document).<span class="at">ready</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb474-26"><a href="jquery-简介.html#cb474-26"></a>        <span class="co">// 选择指定列</span></span>
<span id="cb474-27"><a href="jquery-简介.html#cb474-27"></a>        <span class="at">$</span>(<span class="st">&#39;td:nth-child(5n+3)&#39;</span>)</span>
<span id="cb474-28"><a href="jquery-简介.html#cb474-28"></a>            <span class="co">// 将函数作为参数传给filter方法</span></span>
<span id="cb474-29"><a href="jquery-简介.html#cb474-29"></a>            .<span class="at">filter</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb474-30"><a href="jquery-简介.html#cb474-30"></a>                <span class="va">console</span>.<span class="at">log</span>(<span class="at">$</span>(<span class="kw">this</span>).<span class="at">text</span>())<span class="op">;</span></span>
<span id="cb474-31"><a href="jquery-简介.html#cb474-31"></a>                <span class="cf">if</span> (<span class="at">$</span>(<span class="kw">this</span>).<span class="at">text</span>() <span class="op">&lt;</span> <span class="dv">21</span>) <span class="op">{</span></span>
<span id="cb474-32"><a href="jquery-简介.html#cb474-32"></a>                    <span class="cf">return</span> <span class="kw">true</span><span class="op">;</span></span>
<span id="cb474-33"><a href="jquery-简介.html#cb474-33"></a>                <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></span>
<span id="cb474-34"><a href="jquery-简介.html#cb474-34"></a>                    <span class="cf">return</span> <span class="kw">false</span><span class="op">;</span></span>
<span id="cb474-35"><a href="jquery-简介.html#cb474-35"></a>                <span class="op">}</span></span>
<span id="cb474-36"><a href="jquery-简介.html#cb474-36"></a>            <span class="op">}</span>).<span class="at">addClass</span>(<span class="st">&#39;info&#39;</span>)<span class="op">;</span></span>
<span id="cb474-37"><a href="jquery-简介.html#cb474-37"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb474-38"><a href="jquery-简介.html#cb474-38"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb474-39"><a href="jquery-简介.html#cb474-39"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb474-40"><a href="jquery-简介.html#cb474-40"></a></span>
<span id="cb474-41"><a href="jquery-简介.html#cb474-41"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb474-42"><a href="jquery-简介.html#cb474-42"></a>    <span class="kw">&lt;h1&gt;</span>jQuery中的filter方法&lt;/h1&gt;</span>
<span id="cb474-43"><a href="jquery-简介.html#cb474-43"></a>    <span class="kw">&lt;table&gt;</span></span>
<span id="cb474-44"><a href="jquery-简介.html#cb474-44"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb474-45"><a href="jquery-简介.html#cb474-45"></a>            <span class="kw">&lt;th&gt;</span>序号<span class="kw">&lt;/th&gt;</span></span>
<span id="cb474-46"><a href="jquery-简介.html#cb474-46"></a>            <span class="kw">&lt;th&gt;</span>姓名<span class="kw">&lt;/th&gt;</span></span>
<span id="cb474-47"><a href="jquery-简介.html#cb474-47"></a>            <span class="kw">&lt;th&gt;</span>年龄<span class="kw">&lt;/th&gt;</span></span>
<span id="cb474-48"><a href="jquery-简介.html#cb474-48"></a>            <span class="kw">&lt;th&gt;</span>性别<span class="kw">&lt;/th&gt;</span></span>
<span id="cb474-49"><a href="jquery-简介.html#cb474-49"></a>            <span class="kw">&lt;th&gt;</span>专业<span class="kw">&lt;/th&gt;</span></span>
<span id="cb474-50"><a href="jquery-简介.html#cb474-50"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb474-51"><a href="jquery-简介.html#cb474-51"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb474-52"><a href="jquery-简介.html#cb474-52"></a>            <span class="kw">&lt;td&gt;</span>1<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-53"><a href="jquery-简介.html#cb474-53"></a>            <span class="kw">&lt;td&gt;</span>小明<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-54"><a href="jquery-简介.html#cb474-54"></a>            <span class="kw">&lt;td&gt;</span>21<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-55"><a href="jquery-简介.html#cb474-55"></a>            <span class="kw">&lt;td&gt;</span>男<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-56"><a href="jquery-简介.html#cb474-56"></a>            <span class="kw">&lt;td&gt;</span>新闻<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-57"><a href="jquery-简介.html#cb474-57"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb474-58"><a href="jquery-简介.html#cb474-58"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb474-59"><a href="jquery-简介.html#cb474-59"></a>            <span class="kw">&lt;td&gt;</span>2<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-60"><a href="jquery-简介.html#cb474-60"></a>            <span class="kw">&lt;td&gt;</span>小冷<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-61"><a href="jquery-简介.html#cb474-61"></a>            <span class="kw">&lt;td&gt;</span>20<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-62"><a href="jquery-简介.html#cb474-62"></a>            <span class="kw">&lt;td&gt;</span>女<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-63"><a href="jquery-简介.html#cb474-63"></a>            <span class="kw">&lt;td&gt;</span>广告<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-64"><a href="jquery-简介.html#cb474-64"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb474-65"><a href="jquery-简介.html#cb474-65"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb474-66"><a href="jquery-简介.html#cb474-66"></a>            <span class="kw">&lt;td&gt;</span>3<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-67"><a href="jquery-简介.html#cb474-67"></a>            <span class="kw">&lt;td&gt;</span>小宝<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-68"><a href="jquery-简介.html#cb474-68"></a>            <span class="kw">&lt;td&gt;</span>22<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-69"><a href="jquery-简介.html#cb474-69"></a>            <span class="kw">&lt;td&gt;</span>女<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-70"><a href="jquery-简介.html#cb474-70"></a>            <span class="kw">&lt;td&gt;</span>数学<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-71"><a href="jquery-简介.html#cb474-71"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb474-72"><a href="jquery-简介.html#cb474-72"></a>        <span class="kw">&lt;tr&gt;</span></span>
<span id="cb474-73"><a href="jquery-简介.html#cb474-73"></a>            <span class="kw">&lt;td&gt;</span>4<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-74"><a href="jquery-简介.html#cb474-74"></a>            <span class="kw">&lt;td&gt;</span>老盖<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-75"><a href="jquery-简介.html#cb474-75"></a>            <span class="kw">&lt;td&gt;</span>24<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-76"><a href="jquery-简介.html#cb474-76"></a>            <span class="kw">&lt;td&gt;</span>男<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-77"><a href="jquery-简介.html#cb474-77"></a>            <span class="kw">&lt;td&gt;</span>软件工程<span class="kw">&lt;/td&gt;</span></span>
<span id="cb474-78"><a href="jquery-简介.html#cb474-78"></a>        <span class="kw">&lt;/tr&gt;</span></span>
<span id="cb474-79"><a href="jquery-简介.html#cb474-79"></a>    <span class="kw">&lt;/table&gt;</span></span>
<span id="cb474-80"><a href="jquery-简介.html#cb474-80"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb474-81"><a href="jquery-简介.html#cb474-81"></a></span>
<span id="cb474-82"><a href="jquery-简介.html#cb474-82"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>在这个例子中，我们将一个函数作为参数，传递给<code>filter()</code>方法，最终实现了将年龄小于21岁的单元格标记出来的功能。</p>
</div>
<div id="jquery事件处理" class="section level2">
<h2><span class="header-section-number">51.3</span> jQuery事件处理</h2>
<p>JavaScript内置了很多处理用户交互行为的其他事件的方法，jQuery增强和扩展了其事件处理的机制，并使用更加优美的语法来处理事件。</p>
<div id="处理简单事件" class="section level3">
<h3><span class="header-section-number">51.3.1</span> 处理简单事件</h3>
<p>jQuery提供的<code>on()</code>方法，能够将事件处理函数绑定到选中元素的一个或多个事件上。要移除绑定的事件，使用<code>.off()</code>方法。</p>
<p><code>on()</code>方法的参数如下：</p>
<ul>
<li><code>events</code> 事件名称，必需参数。（多个事件名称用空格隔开）</li>
<li><code>selector</code> 选择符，可选参数，作用是将事件绑定到选择结果中的后代选择符中。</li>
<li><code>data</code> 数据，可选参数，当事件触发后，将数据传递以<code>event.data</code>的形式传递到事件处理函数。</li>
<li><code>handler</code> 处理函数，必需参数，当事件触发时执行的函数。</li>
</ul>
<p><code>on()</code>方法相当于DOM中的<code>addEventListener()</code>，但要比后者功能丰富。</p>
<p>另外，大多数事件类型可以直接利用事件名称作为绑定函数，接受参数为监听函数，例如：</p>
<div class="sourceCode" id="cb475"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb475-1"><a href="jquery-简介.html#cb475-1"></a><span class="at">$</span>(#demo).<span class="at">click</span>(<span class="kw">function</span>()<span class="op">{</span></span>
<span id="cb475-2"><a href="jquery-简介.html#cb475-2"></a>    <span class="co">//事件处理</span></span>
<span id="cb475-3"><a href="jquery-简介.html#cb475-3"></a>    <span class="op">}</span>)<span class="op">;</span></span></code></pre></div>
<p>下面是jQuery中绑定事件的案例：</p>
<div class="sourceCode" id="cb476"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb476-1"><a href="jquery-简介.html#cb476-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb476-2"><a href="jquery-简介.html#cb476-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb476-3"><a href="jquery-简介.html#cb476-3"></a></span>
<span id="cb476-4"><a href="jquery-简介.html#cb476-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb476-5"><a href="jquery-简介.html#cb476-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb476-6"><a href="jquery-简介.html#cb476-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb476-7"><a href="jquery-简介.html#cb476-7"></a>    <span class="kw">&lt;title&gt;</span>jQuery中的事件绑定<span class="kw">&lt;/title&gt;</span></span>
<span id="cb476-8"><a href="jquery-简介.html#cb476-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb476-9"><a href="jquery-简介.html#cb476-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb476-10"><a href="jquery-简介.html#cb476-10"></a>    body {</span>
<span id="cb476-11"><a href="jquery-简介.html#cb476-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb476-12"><a href="jquery-简介.html#cb476-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb476-13"><a href="jquery-简介.html#cb476-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb476-14"><a href="jquery-简介.html#cb476-14"></a>    }</span>
<span id="cb476-15"><a href="jquery-简介.html#cb476-15"></a></span>
<span id="cb476-16"><a href="jquery-简介.html#cb476-16"></a>    h1 {</span>
<span id="cb476-17"><a href="jquery-简介.html#cb476-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb476-18"><a href="jquery-简介.html#cb476-18"></a>    }</span>
<span id="cb476-19"><a href="jquery-简介.html#cb476-19"></a></span>
<span id="cb476-20"><a href="jquery-简介.html#cb476-20"></a>    div {</span>
<span id="cb476-21"><a href="jquery-简介.html#cb476-21"></a>        <span class="kw">height</span>: <span class="dv">300</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb476-22"><a href="jquery-简介.html#cb476-22"></a>        <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="cn">red</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb476-23"><a href="jquery-简介.html#cb476-23"></a>        <span class="kw">border-radius</span>: <span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb476-24"><a href="jquery-简介.html#cb476-24"></a>    }</span>
<span id="cb476-25"><a href="jquery-简介.html#cb476-25"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb476-26"><a href="jquery-简介.html#cb476-26"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb476-27"><a href="jquery-简介.html#cb476-27"></a>    <span class="at">$</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb476-28"><a href="jquery-简介.html#cb476-28"></a>        <span class="at">$</span>(<span class="st">&quot;#demo&quot;</span>).<span class="at">on</span>(<span class="st">&#39;click&#39;</span><span class="op">,</span> <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb476-29"><a href="jquery-简介.html#cb476-29"></a>            <span class="at">$</span>(<span class="kw">this</span>).<span class="at">css</span>(<span class="st">&#39;backgroundColor&#39;</span><span class="op">,</span> <span class="at">randomColor</span>())<span class="op">;</span></span>
<span id="cb476-30"><a href="jquery-简介.html#cb476-30"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb476-31"><a href="jquery-简介.html#cb476-31"></a></span>
<span id="cb476-32"><a href="jquery-简介.html#cb476-32"></a>        <span class="kw">function</span> <span class="at">randomColor</span>() <span class="op">{</span></span>
<span id="cb476-33"><a href="jquery-简介.html#cb476-33"></a>            <span class="cf">return</span> <span class="st">&#39;#&#39;</span> <span class="op">+</span> <span class="va">Math</span>.<span class="at">random</span>().<span class="at">toString</span>(<span class="dv">16</span>).<span class="at">slice</span>(<span class="dv">2</span><span class="op">,</span> <span class="dv">8</span>)<span class="op">;</span></span>
<span id="cb476-34"><a href="jquery-简介.html#cb476-34"></a>        <span class="op">};</span></span>
<span id="cb476-35"><a href="jquery-简介.html#cb476-35"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb476-36"><a href="jquery-简介.html#cb476-36"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb476-37"><a href="jquery-简介.html#cb476-37"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb476-38"><a href="jquery-简介.html#cb476-38"></a></span>
<span id="cb476-39"><a href="jquery-简介.html#cb476-39"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb476-40"><a href="jquery-简介.html#cb476-40"></a>    <span class="kw">&lt;h1&gt;</span>jQuery中的事件绑定<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb476-41"><a href="jquery-简介.html#cb476-41"></a>    <span class="kw">&lt;p&gt;</span>点击方框区域，随机更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb476-42"><a href="jquery-简介.html#cb476-42"></a>    <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;demo&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb476-43"><a href="jquery-简介.html#cb476-43"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb476-44"><a href="jquery-简介.html#cb476-44"></a></span>
<span id="cb476-45"><a href="jquery-简介.html#cb476-45"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
</div>
<div id="事件对象-1" class="section level3">
<h3><span class="header-section-number">51.3.2</span> 事件对象</h3>
<p>在jQuery中，事件对象是通过唯一的参数传递给事件监听函数的。</p>
<div class="sourceCode" id="cb477"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb477-1"><a href="jquery-简介.html#cb477-1"></a><span class="kw">function</span>(e)<span class="op">{</span></span>
<span id="cb477-2"><a href="jquery-简介.html#cb477-2"></a>    <span class="va">e</span>.<span class="at">preventDefault</span>()</span>
<span id="cb477-3"><a href="jquery-简介.html#cb477-3"></a><span class="op">}</span></span></code></pre></div>
<p>对于事件对象，jQuery最重要的工作就是替开发者解决了浏览器兼容性问题。常用的属性和方法有：</p>
<ul>
<li><code>target</code> 引起事件的元素、对象。</li>
<li><code>type</code> 事件的名称。</li>
<li><code>preventDefault()</code> 阻止事件的默认行为。</li>
</ul>
</div>
<div id="jquery-与-css" class="section level3">
<h3><span class="header-section-number">51.3.3</span> jQuery 与 CSS</h3>
<p>jQuery提供了一系列处理CSS样式的方法，在之前的章节中，我们已经使用过<code>css()</code>和<code>addClass()</code>方法，下面我们介绍jQuery中和CSS有关的常用方法。</p>
<div id="addclass" class="section level4">
<h4><span class="header-section-number">51.3.3.1</span> <code>addClass()</code></h4>
<p><code>addClass()</code>为所有选中的元素添加指定的class名称。如：</p>
<div class="sourceCode" id="cb478"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb478-1"><a href="jquery-简介.html#cb478-1"></a> <span class="at">$</span>( <span class="st">&quot;p:last&quot;</span> ).<span class="at">addClass</span>( <span class="st">&quot;selected highlight&quot;</span> )<span class="op">;</span></span></code></pre></div>
</div>
<div id="css-1" class="section level4">
<h4><span class="header-section-number">51.3.3.2</span> <code>css()</code></h4>
<p><code>css()</code> 获取选中的元素的指定样式值，或者设置样式。</p>
<div class="sourceCode" id="cb479"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb479-1"><a href="jquery-简介.html#cb479-1"></a><span class="kw">var</span> color <span class="op">=</span> <span class="at">$</span>( <span class="kw">this</span> ).<span class="at">css</span>( <span class="st">&quot;background-color&quot;</span> )<span class="op">;</span></span>
<span id="cb479-2"><a href="jquery-简介.html#cb479-2"></a>    <span class="at">$</span>( <span class="kw">this</span> ).<span class="at">css</span>( <span class="st">&quot;color&quot;</span><span class="op">,</span> <span class="st">&quot;red&quot;</span> )<span class="op">;</span></span></code></pre></div>
<p>用<code>css()</code>方法设置多个样式值时，将多个属性及其值使用对象字面量<code>{}</code>包含起来，属性和值之间用冒号“:”，多个属性及其值之间用逗号“,”隔开。</p>
<div class="sourceCode" id="cb480"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb480-1"><a href="jquery-简介.html#cb480-1"></a><span class="at">$</span>( <span class="kw">this</span> ).<span class="at">css</span>(<span class="op">{</span></span>
<span id="cb480-2"><a href="jquery-简介.html#cb480-2"></a>   <span class="st">&quot;background-color&quot;</span><span class="op">:</span> <span class="st">&quot;yellow&quot;</span><span class="op">,</span></span>
<span id="cb480-3"><a href="jquery-简介.html#cb480-3"></a>   <span class="st">&quot;font-weight&quot;</span><span class="op">:</span> <span class="st">&quot;bolder&quot;</span></span>
<span id="cb480-4"><a href="jquery-简介.html#cb480-4"></a><span class="op">}</span>)<span class="op">;</span></span></code></pre></div>
</div>
<div id="hasclass" class="section level4">
<h4><span class="header-section-number">51.3.3.3</span> <code>hasClass()</code></h4>
<p><code>hasClass()</code>在所有选中的元素中进行判断，看是否存在包含有指定内容的class的元素。例如：</p>
<div class="sourceCode" id="cb481"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb481-1"><a href="jquery-简介.html#cb481-1"></a><span class="at">$</span>( <span class="st">&quot;#mydiv&quot;</span> ).<span class="at">hasClass</span>( <span class="st">&quot;bar&quot;</span> )</span></code></pre></div>
</div>
<div id="toggleclass" class="section level4">
<h4><span class="header-section-number">51.3.3.4</span> <code>toggleclass()</code></h4>
<p><code>toggleclass()</code>为 所有匹配的元素添加或者移除一个或者多个class类，增加、移除操作取决于当前class的值。例如：</p>
<div class="sourceCode" id="cb482"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb482-1"><a href="jquery-简介.html#cb482-1"></a><span class="at">$</span>( <span class="kw">this</span> ).<span class="at">toggleClass</span>( <span class="st">&quot;highlight&quot;</span> )<span class="op">;</span></span></code></pre></div>
<p>下面的案例将演示jQuery如何操作CSS：</p>
<div class="sourceCode" id="cb483"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb483-1"><a href="jquery-简介.html#cb483-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb483-2"><a href="jquery-简介.html#cb483-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb483-3"><a href="jquery-简介.html#cb483-3"></a></span>
<span id="cb483-4"><a href="jquery-简介.html#cb483-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb483-5"><a href="jquery-简介.html#cb483-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb483-6"><a href="jquery-简介.html#cb483-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb483-7"><a href="jquery-简介.html#cb483-7"></a>    <span class="kw">&lt;title&gt;</span>toggleClass方法练习&lt;/title&gt;</span>
<span id="cb483-8"><a href="jquery-简介.html#cb483-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb483-9"><a href="jquery-简介.html#cb483-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb483-10"><a href="jquery-简介.html#cb483-10"></a>    body {</span>
<span id="cb483-11"><a href="jquery-简介.html#cb483-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb483-12"><a href="jquery-简介.html#cb483-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb483-13"><a href="jquery-简介.html#cb483-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb483-14"><a href="jquery-简介.html#cb483-14"></a>    }</span>
<span id="cb483-15"><a href="jquery-简介.html#cb483-15"></a></span>
<span id="cb483-16"><a href="jquery-简介.html#cb483-16"></a>    h1 {</span>
<span id="cb483-17"><a href="jquery-简介.html#cb483-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb483-18"><a href="jquery-简介.html#cb483-18"></a>    }</span>
<span id="cb483-19"><a href="jquery-简介.html#cb483-19"></a></span>
<span id="cb483-20"><a href="jquery-简介.html#cb483-20"></a>    <span class="fu">.highlight</span> {</span>
<span id="cb483-21"><a href="jquery-简介.html#cb483-21"></a>        <span class="kw">background</span>: <span class="cn">yellow</span><span class="op">;</span></span>
<span id="cb483-22"><a href="jquery-简介.html#cb483-22"></a>    }</span>
<span id="cb483-23"><a href="jquery-简介.html#cb483-23"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb483-24"><a href="jquery-简介.html#cb483-24"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb483-25"><a href="jquery-简介.html#cb483-25"></a>    <span class="at">$</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb483-26"><a href="jquery-简介.html#cb483-26"></a>        <span class="at">$</span>(<span class="st">&quot;p&quot;</span>).<span class="at">on</span>(<span class="st">&quot;click&quot;</span><span class="op">,</span> <span class="kw">function</span> () <span class="op">{</span></span>
<span id="cb483-27"><a href="jquery-简介.html#cb483-27"></a>           <span class="at">$</span>(<span class="kw">this</span>).<span class="at">toggleClass</span>(<span class="st">&#39;highlight&#39;</span>)<span class="op">;</span></span>
<span id="cb483-28"><a href="jquery-简介.html#cb483-28"></a>        <span class="op">}</span>)</span>
<span id="cb483-29"><a href="jquery-简介.html#cb483-29"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb483-30"><a href="jquery-简介.html#cb483-30"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb483-31"><a href="jquery-简介.html#cb483-31"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb483-32"><a href="jquery-简介.html#cb483-32"></a></span>
<span id="cb483-33"><a href="jquery-简介.html#cb483-33"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb483-34"><a href="jquery-简介.html#cb483-34"></a>    <span class="kw">&lt;h1&gt;</span>toggleClass方法练习&lt;/h1&gt;</span>
<span id="cb483-35"><a href="jquery-简介.html#cb483-35"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-36"><a href="jquery-简介.html#cb483-36"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-37"><a href="jquery-简介.html#cb483-37"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-38"><a href="jquery-简介.html#cb483-38"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-39"><a href="jquery-简介.html#cb483-39"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-40"><a href="jquery-简介.html#cb483-40"></a>    <span class="kw">&lt;p&gt;</span>点击更换背景颜色<span class="kw">&lt;/p&gt;</span></span>
<span id="cb483-41"><a href="jquery-简介.html#cb483-41"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb483-42"><a href="jquery-简介.html#cb483-42"></a></span>
<span id="cb483-43"><a href="jquery-简介.html#cb483-43"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
</div>
</div>
<div id="jquery特效" class="section level3">
<h3><span class="header-section-number">51.3.4</span> jQuery特效</h3>
<p>jQuery提供了一些为页面添加动画特效的方法，从常用的淡入淡出到复杂的动画，jQuery都可应对。</p>
<div id="显示隐藏" class="section level4">
<h4><span class="header-section-number">51.3.4.1</span> 显示隐藏</h4>
<p><code>hide()</code>和<code>show()</code>方法能隐藏、显示选中的元素，相当与在这些元素的起始标签中加入了<code>display</code>样式。例如：</p>
<div class="sourceCode" id="cb484"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb484-1"><a href="jquery-简介.html#cb484-1"></a><span class="at">$</span>(<span class="st">&quot;p:first&quot;</span>).<span class="at">show</span>()<span class="op">;</span></span></code></pre></div>
<p>没有参数的<code>show()</code>、<code>hide()</code>方法，会立即显示、隐藏选中的元素。<code>hide()</code>、<code>show()</code>方法的常用参数如下：</p>
<ul>
<li><code>duration</code> 一个字符串或者数字决定动画将运行多久。字符串有“slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。</li>
<li><code>easing</code> 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。</li>
<li><code>complete</code> 在动画完成时执行的函数，可选参数。</li>
</ul>
<p><code>toggle()</code>方法能自动识别状态，实现显示、隐藏效果的切换，其使用方法和<code>show()</code>、<code>hide()</code>方法类似。</p>
<p>下面是上述方法的案例：</p>
<div class="sourceCode" id="cb485"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb485-1"><a href="jquery-简介.html#cb485-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb485-2"><a href="jquery-简介.html#cb485-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb485-3"><a href="jquery-简介.html#cb485-3"></a></span>
<span id="cb485-4"><a href="jquery-简介.html#cb485-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb485-5"><a href="jquery-简介.html#cb485-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb485-6"><a href="jquery-简介.html#cb485-6"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;X-UA-Compatible&quot;</span><span class="ot"> content=</span><span class="st">&quot;IE=edge&quot;</span><span class="kw">&gt;</span></span>
<span id="cb485-7"><a href="jquery-简介.html#cb485-7"></a>    <span class="kw">&lt;title&gt;</span>jQuery显示隐藏特效<span class="kw">&lt;/title&gt;</span></span>
<span id="cb485-8"><a href="jquery-简介.html#cb485-8"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb485-9"><a href="jquery-简介.html#cb485-9"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> media=</span><span class="st">&quot;screen&quot;</span><span class="kw">&gt;</span></span>
<span id="cb485-10"><a href="jquery-简介.html#cb485-10"></a>    body {</span>
<span id="cb485-11"><a href="jquery-简介.html#cb485-11"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb485-12"><a href="jquery-简介.html#cb485-12"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb485-13"><a href="jquery-简介.html#cb485-13"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb485-14"><a href="jquery-简介.html#cb485-14"></a>    }</span>
<span id="cb485-15"><a href="jquery-简介.html#cb485-15"></a></span>
<span id="cb485-16"><a href="jquery-简介.html#cb485-16"></a>    h1 {</span>
<span id="cb485-17"><a href="jquery-简介.html#cb485-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb485-18"><a href="jquery-简介.html#cb485-18"></a>    }</span>
<span id="cb485-19"><a href="jquery-简介.html#cb485-19"></a></span>
<span id="cb485-20"><a href="jquery-简介.html#cb485-20"></a>    button {</span>
<span id="cb485-21"><a href="jquery-简介.html#cb485-21"></a>        <span class="kw">margin</span>: <span class="dv">5</span><span class="dt">px</span> <span class="dv">20</span><span class="dt">px</span> <span class="dv">5</span><span class="dt">px</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb485-22"><a href="jquery-简介.html#cb485-22"></a>    }</span>
<span id="cb485-23"><a href="jquery-简介.html#cb485-23"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb485-24"><a href="jquery-简介.html#cb485-24"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb485-25"><a href="jquery-简介.html#cb485-25"></a>    <span class="at">$</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb485-26"><a href="jquery-简介.html#cb485-26"></a>        <span class="at">$</span>(<span class="st">&quot;button:contains(&#39;显示&#39;)&quot;</span>).<span class="at">click</span>(<span class="kw">function</span> () <span class="op">{</span></span>
<span id="cb485-27"><a href="jquery-简介.html#cb485-27"></a>            <span class="at">$</span>(<span class="st">&quot;p:first&quot;</span>).<span class="at">show</span>()<span class="op">;</span></span>
<span id="cb485-28"><a href="jquery-简介.html#cb485-28"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb485-29"><a href="jquery-简介.html#cb485-29"></a>        <span class="at">$</span>(<span class="st">&quot;button:contains(&#39;隐藏&#39;)&quot;</span>).<span class="at">click</span>(<span class="kw">function</span> () <span class="op">{</span></span>
<span id="cb485-30"><a href="jquery-简介.html#cb485-30"></a>            <span class="at">$</span>(<span class="st">&quot;p:first&quot;</span>).<span class="at">hide</span>()<span class="op">;</span></span>
<span id="cb485-31"><a href="jquery-简介.html#cb485-31"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb485-32"><a href="jquery-简介.html#cb485-32"></a>        <span class="at">$</span>(<span class="st">&quot;button:contains(&#39;toggle&#39;)&quot;</span>).<span class="at">click</span>(<span class="kw">function</span> () <span class="op">{</span></span>
<span id="cb485-33"><a href="jquery-简介.html#cb485-33"></a>            <span class="at">$</span>(<span class="st">&quot;p:first&quot;</span>).<span class="at">toggle</span>()<span class="op">;</span></span>
<span id="cb485-34"><a href="jquery-简介.html#cb485-34"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb485-35"><a href="jquery-简介.html#cb485-35"></a>        <span class="at">$</span>(<span class="st">&quot;button:contains(&#39;duration&#39;)&quot;</span>).<span class="at">click</span>(<span class="kw">function</span> () <span class="op">{</span></span>
<span id="cb485-36"><a href="jquery-简介.html#cb485-36"></a>            <span class="at">$</span>(<span class="st">&quot;p:first&quot;</span>).<span class="at">toggle</span>(<span class="st">&#39;fast&#39;</span>)<span class="op">;</span></span>
<span id="cb485-37"><a href="jquery-简介.html#cb485-37"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb485-38"><a href="jquery-简介.html#cb485-38"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb485-39"><a href="jquery-简介.html#cb485-39"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb485-40"><a href="jquery-简介.html#cb485-40"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb485-41"><a href="jquery-简介.html#cb485-41"></a></span>
<span id="cb485-42"><a href="jquery-简介.html#cb485-42"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb485-43"><a href="jquery-简介.html#cb485-43"></a>    <span class="kw">&lt;h1&gt;</span>jQuery显示隐藏特效<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb485-44"><a href="jquery-简介.html#cb485-44"></a>    <span class="kw">&lt;button&gt;</span>显示<span class="kw">&lt;/button&gt;&lt;button&gt;</span>隐藏<span class="kw">&lt;/button&gt;&lt;button&gt;</span>toggle<span class="kw">&lt;/button&gt;&lt;button&gt;</span>duration<span class="kw">&lt;/button&gt;</span></span>
<span id="cb485-45"><a href="jquery-简介.html#cb485-45"></a>    <span class="kw">&lt;p&gt;</span>不管你学习任何一项技能，选择任何一种专业，从事任何一个工作，如果你在刚接触的时候可以比较顺利达到入门，体验到些许成就感，那么你就会对它感兴趣，甚至越来越有兴趣，也会越学越好。反之，初学体验不佳将直接导致兴趣丧失。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb485-46"><a href="jquery-简介.html#cb485-46"></a>    <span class="kw">&lt;p&gt;</span>即使存在某种技能上的天赋，如果初学体验不佳，也会造成兴趣丧失，进而技能天赋丧失。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb485-47"><a href="jquery-简介.html#cb485-47"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb485-48"><a href="jquery-简介.html#cb485-48"></a></span>
<span id="cb485-49"><a href="jquery-简介.html#cb485-49"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
</div>
<div id="淡入淡出" class="section level4">
<h4><span class="header-section-number">51.3.4.2</span> 淡入淡出</h4>
<p><code>fadeIn()</code>和<code>fadeOut()</code>、以及<code>fadeTo()</code>方法通过改变匹配元素的不透明度做动画效果，<code>fadeTo()</code>方法不会隐藏的元素并可以指定最后的透明度值。<code>fadeToggle()</code>方法能在淡入、淡出效果之间切换。</p>
<p>这几个方法的常用参数和<code>show()</code>方法类似：</p>
<ul>
<li><code>duration</code> 一个字符串或者数字决定动画将运行多久。字符串有“slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。</li>
<li><code>easing</code> 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。</li>
<li><code>complete</code> 在动画完成时执行的函数，可选参数。</li>
</ul>
<p>例如下面的代码将使div在3000毫秒时长内淡入，并在动画结束后，使span元素在100毫秒淡入：</p>
<div class="sourceCode" id="cb486"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb486-1"><a href="jquery-简介.html#cb486-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb486-2"><a href="jquery-简介.html#cb486-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb486-3"><a href="jquery-简介.html#cb486-3"></a></span>
<span id="cb486-4"><a href="jquery-简介.html#cb486-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb486-5"><a href="jquery-简介.html#cb486-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb486-6"><a href="jquery-简介.html#cb486-6"></a>    <span class="kw">&lt;title&gt;</span>jQuery淡入淡出特效<span class="kw">&lt;/title&gt;</span></span>
<span id="cb486-7"><a href="jquery-简介.html#cb486-7"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb486-8"><a href="jquery-简介.html#cb486-8"></a>    <span class="kw">&lt;style&gt;</span></span>
<span id="cb486-9"><a href="jquery-简介.html#cb486-9"></a>    body {</span>
<span id="cb486-10"><a href="jquery-简介.html#cb486-10"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-11"><a href="jquery-简介.html#cb486-11"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb486-12"><a href="jquery-简介.html#cb486-12"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb486-13"><a href="jquery-简介.html#cb486-13"></a>    }</span>
<span id="cb486-14"><a href="jquery-简介.html#cb486-14"></a></span>
<span id="cb486-15"><a href="jquery-简介.html#cb486-15"></a>    h1 {</span>
<span id="cb486-16"><a href="jquery-简介.html#cb486-16"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb486-17"><a href="jquery-简介.html#cb486-17"></a>    }</span>
<span id="cb486-18"><a href="jquery-简介.html#cb486-18"></a></span>
<span id="cb486-19"><a href="jquery-简介.html#cb486-19"></a>    p {</span>
<span id="cb486-20"><a href="jquery-简介.html#cb486-20"></a>        <span class="kw">position</span>: <span class="dv">relative</span><span class="op">;</span></span>
<span id="cb486-21"><a href="jquery-简介.html#cb486-21"></a>        <span class="kw">width</span>: <span class="dv">400</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-22"><a href="jquery-简介.html#cb486-22"></a>        <span class="kw">height</span>: <span class="dv">90</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-23"><a href="jquery-简介.html#cb486-23"></a>    }</span>
<span id="cb486-24"><a href="jquery-简介.html#cb486-24"></a></span>
<span id="cb486-25"><a href="jquery-简介.html#cb486-25"></a>    div {</span>
<span id="cb486-26"><a href="jquery-简介.html#cb486-26"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb486-27"><a href="jquery-简介.html#cb486-27"></a>        <span class="kw">width</span>: <span class="dv">400</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-28"><a href="jquery-简介.html#cb486-28"></a>        <span class="kw">height</span>: <span class="dv">65</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-29"><a href="jquery-简介.html#cb486-29"></a>        <span class="kw">font-size</span>: <span class="dv">36</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-30"><a href="jquery-简介.html#cb486-30"></a>        <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb486-31"><a href="jquery-简介.html#cb486-31"></a>        <span class="kw">color</span>: <span class="cn">yellow</span><span class="op">;</span></span>
<span id="cb486-32"><a href="jquery-简介.html#cb486-32"></a>        <span class="kw">background</span>: <span class="cn">red</span><span class="op">;</span></span>
<span id="cb486-33"><a href="jquery-简介.html#cb486-33"></a>        <span class="kw">padding-top</span>: <span class="dv">25</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb486-34"><a href="jquery-简介.html#cb486-34"></a>        <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></span>
<span id="cb486-35"><a href="jquery-简介.html#cb486-35"></a>        <span class="kw">display</span>: <span class="dv">none</span><span class="op">;</span></span>
<span id="cb486-36"><a href="jquery-简介.html#cb486-36"></a>    }</span>
<span id="cb486-37"><a href="jquery-简介.html#cb486-37"></a></span>
<span id="cb486-38"><a href="jquery-简介.html#cb486-38"></a>    span {</span>
<span id="cb486-39"><a href="jquery-简介.html#cb486-39"></a>        <span class="kw">display</span>: <span class="dv">none</span><span class="op">;</span></span>
<span id="cb486-40"><a href="jquery-简介.html#cb486-40"></a>    }</span>
<span id="cb486-41"><a href="jquery-简介.html#cb486-41"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb486-42"><a href="jquery-简介.html#cb486-42"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb486-43"><a href="jquery-简介.html#cb486-43"></a></span>
<span id="cb486-44"><a href="jquery-简介.html#cb486-44"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb486-45"><a href="jquery-简介.html#cb486-45"></a>    <span class="kw">&lt;h1&gt;</span>jQuery淡入淡出特效<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb486-46"><a href="jquery-简介.html#cb486-46"></a>    <span class="kw">&lt;p&gt;</span></span>
<span id="cb486-47"><a href="jquery-简介.html#cb486-47"></a>        too young, too simple，sometimes naive。 (<span class="kw">&lt;a</span><span class="ot"> href=</span><span class="st">&quot;#&quot;</span><span class="kw">&gt;</span>click!<span class="kw">&lt;/a&gt;</span>)</span>
<span id="cb486-48"><a href="jquery-简介.html#cb486-48"></a>        <span class="kw">&lt;div&gt;&lt;span&gt;</span>CENSORED!<span class="kw">&lt;/span&gt;&lt;/div&gt;</span></span>
<span id="cb486-49"><a href="jquery-简介.html#cb486-49"></a>    <span class="kw">&lt;/p&gt;</span></span>
<span id="cb486-50"><a href="jquery-简介.html#cb486-50"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb486-51"><a href="jquery-简介.html#cb486-51"></a>    <span class="at">$</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb486-52"><a href="jquery-简介.html#cb486-52"></a>        <span class="kw">var</span> t <span class="op">=</span> <span class="at">$</span>(<span class="st">&#39;p&#39;</span>).<span class="at">position</span>().<span class="at">top</span> <span class="op">+</span> <span class="st">&#39;px&#39;</span><span class="op">;</span></span>
<span id="cb486-53"><a href="jquery-简介.html#cb486-53"></a>        <span class="kw">var</span> l <span class="op">=</span> <span class="at">$</span>(<span class="st">&#39;p&#39;</span>).<span class="at">position</span>().<span class="at">left</span> <span class="op">+</span> <span class="st">&#39;px&#39;</span><span class="op">;</span></span>
<span id="cb486-54"><a href="jquery-简介.html#cb486-54"></a>        <span class="at">$</span>(<span class="st">&#39;div&#39;</span>).<span class="at">css</span>(<span class="op">{</span></span>
<span id="cb486-55"><a href="jquery-简介.html#cb486-55"></a>            <span class="st">&#39;top&#39;</span><span class="op">:</span> t<span class="op">,</span></span>
<span id="cb486-56"><a href="jquery-简介.html#cb486-56"></a>            <span class="st">&#39;left&#39;</span><span class="op">:</span> l</span>
<span id="cb486-57"><a href="jquery-简介.html#cb486-57"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb486-58"><a href="jquery-简介.html#cb486-58"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb486-59"><a href="jquery-简介.html#cb486-59"></a>    <span class="at">$</span>(<span class="st">&quot;a&quot;</span>).<span class="at">click</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb486-60"><a href="jquery-简介.html#cb486-60"></a>        <span class="at">$</span>(<span class="st">&quot;div&quot;</span>).<span class="at">fadeIn</span>(<span class="dv">3000</span><span class="op">,</span> <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb486-61"><a href="jquery-简介.html#cb486-61"></a>            <span class="at">$</span>(<span class="st">&quot;span&quot;</span>).<span class="at">fadeIn</span>(<span class="dv">100</span>)<span class="op">;</span></span>
<span id="cb486-62"><a href="jquery-简介.html#cb486-62"></a>        <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb486-63"><a href="jquery-简介.html#cb486-63"></a>        <span class="cf">return</span> <span class="kw">false</span><span class="op">;</span></span>
<span id="cb486-64"><a href="jquery-简介.html#cb486-64"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb486-65"><a href="jquery-简介.html#cb486-65"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb486-66"><a href="jquery-简介.html#cb486-66"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb486-67"><a href="jquery-简介.html#cb486-67"></a></span>
<span id="cb486-68"><a href="jquery-简介.html#cb486-68"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
</div>
<div id="上下滑动效果" class="section level4">
<h4><span class="header-section-number">51.3.4.3</span> 上下滑动效果</h4>
<p><code>slideUp()</code>、<code>slideDown()</code>和<code>slideToggle()</code>方法用来实现上下滑动效果，其用法和淡入淡出、显示隐藏的方法类似。</p>
</div>
<div id="自定义动画效果" class="section level4">
<h4><span class="header-section-number">51.3.4.4</span> 自定义动画效果</h4>
<p><code>.animate()</code>方法能根据一组css属性，执行自定义动画效果。这个方法的参数如下：</p>
<ul>
<li><code>properties</code> 一个CSS属性和值的对象,动画将根据这组对象移动。所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。。</li>
<li><code>duration</code> 一个字符串或者数字决定动画将运行多久。字符串有“slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。</li>
<li><code>easing</code> 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。</li>
<li><code>complete</code> 在动画完成时执行的函数，可选参数。</li>
</ul>
<p>例如：</p>
<div class="sourceCode" id="cb487"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb487-1"><a href="jquery-简介.html#cb487-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb487-2"><a href="jquery-简介.html#cb487-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb487-3"><a href="jquery-简介.html#cb487-3"></a></span>
<span id="cb487-4"><a href="jquery-简介.html#cb487-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb487-5"><a href="jquery-简介.html#cb487-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb487-6"><a href="jquery-简介.html#cb487-6"></a>    <span class="kw">&lt;title&gt;</span>jQuery自定义动画<span class="kw">&lt;/title&gt;</span></span>
<span id="cb487-7"><a href="jquery-简介.html#cb487-7"></a>    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/jquery-1.11.3.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb487-8"><a href="jquery-简介.html#cb487-8"></a>    <span class="kw">&lt;style&gt;</span></span>
<span id="cb487-9"><a href="jquery-简介.html#cb487-9"></a>    body {</span>
<span id="cb487-10"><a href="jquery-简介.html#cb487-10"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb487-11"><a href="jquery-简介.html#cb487-11"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb487-12"><a href="jquery-简介.html#cb487-12"></a>        <span class="kw">font</span>: <span class="dv">18</span><span class="dt">px</span>/<span class="dv">1.8</span><span class="dt">em</span> <span class="st">&#39;微软雅黑&#39;</span><span class="op">;</span></span>
<span id="cb487-13"><a href="jquery-简介.html#cb487-13"></a>    }</span>
<span id="cb487-14"><a href="jquery-简介.html#cb487-14"></a></span>
<span id="cb487-15"><a href="jquery-简介.html#cb487-15"></a>    h1 {</span>
<span id="cb487-16"><a href="jquery-简介.html#cb487-16"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb487-17"><a href="jquery-简介.html#cb487-17"></a>    }</span>
<span id="cb487-18"><a href="jquery-简介.html#cb487-18"></a></span>
<span id="cb487-19"><a href="jquery-简介.html#cb487-19"></a>    p {</span>
<span id="cb487-20"><a href="jquery-简介.html#cb487-20"></a>        <span class="kw">width</span>: <span class="dv">400</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb487-21"><a href="jquery-简介.html#cb487-21"></a>        <span class="kw">height</span>: <span class="dv">90</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb487-22"><a href="jquery-简介.html#cb487-22"></a>    }</span>
<span id="cb487-23"><a href="jquery-简介.html#cb487-23"></a></span>
<span id="cb487-24"><a href="jquery-简介.html#cb487-24"></a>    div {</span>
<span id="cb487-25"><a href="jquery-简介.html#cb487-25"></a>        <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="cn">red</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb487-26"><a href="jquery-简介.html#cb487-26"></a>        <span class="kw">border-radius</span>: <span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb487-27"><a href="jquery-简介.html#cb487-27"></a>    }</span>
<span id="cb487-28"><a href="jquery-简介.html#cb487-28"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb487-29"><a href="jquery-简介.html#cb487-29"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb487-30"><a href="jquery-简介.html#cb487-30"></a></span>
<span id="cb487-31"><a href="jquery-简介.html#cb487-31"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb487-32"><a href="jquery-简介.html#cb487-32"></a>    <span class="kw">&lt;h1&gt;</span>jQuery自定义动画<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb487-33"><a href="jquery-简介.html#cb487-33"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb487-34"><a href="jquery-简介.html#cb487-34"></a>        <span class="kw">&lt;p&gt;</span></span>
<span id="cb487-35"><a href="jquery-简介.html#cb487-35"></a>            jQuery自定义动画更加灵活，可以同时对多个属性设置动画效果</span>
<span id="cb487-36"><a href="jquery-简介.html#cb487-36"></a>        <span class="kw">&lt;/p&gt;</span></span>
<span id="cb487-37"><a href="jquery-简介.html#cb487-37"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb487-38"><a href="jquery-简介.html#cb487-38"></a>    <span class="kw">&lt;script&gt;</span></span>
<span id="cb487-39"><a href="jquery-简介.html#cb487-39"></a>    <span class="at">$</span>(<span class="st">&#39;p&#39;</span>).<span class="at">click</span>(<span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb487-40"><a href="jquery-简介.html#cb487-40"></a>        <span class="kw">var</span> paraWidth <span class="op">=</span> <span class="at">$</span>(<span class="st">&#39;p&#39;</span>).<span class="at">outerWidth</span>()<span class="op">;</span></span>
<span id="cb487-41"><a href="jquery-简介.html#cb487-41"></a>        <span class="kw">var</span> $switcher <span class="op">=</span> <span class="at">$</span>(<span class="kw">this</span>).<span class="at">parent</span>()<span class="op">;</span></span>
<span id="cb487-42"><a href="jquery-简介.html#cb487-42"></a>        <span class="kw">var</span> switcherWidth <span class="op">=</span> <span class="va">$switcher</span>.<span class="at">outerWidth</span>()<span class="op">;</span></span>
<span id="cb487-43"><a href="jquery-简介.html#cb487-43"></a>        $switcher</span>
<span id="cb487-44"><a href="jquery-简介.html#cb487-44"></a>            .<span class="at">css</span>(<span class="op">{</span></span>
<span id="cb487-45"><a href="jquery-简介.html#cb487-45"></a>                <span class="dt">position</span><span class="op">:</span> <span class="st">&#39;relative&#39;</span></span>
<span id="cb487-46"><a href="jquery-简介.html#cb487-46"></a>            <span class="op">}</span>)</span>
<span id="cb487-47"><a href="jquery-简介.html#cb487-47"></a>            .<span class="at">animate</span>(<span class="op">{</span></span>
<span id="cb487-48"><a href="jquery-简介.html#cb487-48"></a>                <span class="dt">width</span><span class="op">:</span> <span class="st">&#39;50%&#39;</span></span>
<span id="cb487-49"><a href="jquery-简介.html#cb487-49"></a>            <span class="op">},</span> <span class="st">&#39;slow&#39;</span>)</span>
<span id="cb487-50"><a href="jquery-简介.html#cb487-50"></a>            .<span class="at">animate</span>(<span class="op">{</span></span>
<span id="cb487-51"><a href="jquery-简介.html#cb487-51"></a>                <span class="dt">left</span><span class="op">:</span> switcherWidth <span class="op">-</span> paraWidth</span>
<span id="cb487-52"><a href="jquery-简介.html#cb487-52"></a>            <span class="op">},</span> <span class="st">&#39;slow&#39;</span>)</span>
<span id="cb487-53"><a href="jquery-简介.html#cb487-53"></a>            .<span class="at">animate</span>(<span class="op">{</span></span>
<span id="cb487-54"><a href="jquery-简介.html#cb487-54"></a>                <span class="dt">height</span><span class="op">:</span> <span class="st">&#39;+=20px&#39;</span></span>
<span id="cb487-55"><a href="jquery-简介.html#cb487-55"></a>            <span class="op">},</span> <span class="st">&#39;slow&#39;</span>)</span>
<span id="cb487-56"><a href="jquery-简介.html#cb487-56"></a>            .<span class="at">animate</span>(<span class="op">{</span></span>
<span id="cb487-57"><a href="jquery-简介.html#cb487-57"></a>                <span class="dt">borderWidth</span><span class="op">:</span> <span class="st">&#39;5px&#39;</span></span>
<span id="cb487-58"><a href="jquery-简介.html#cb487-58"></a>            <span class="op">},</span> <span class="st">&#39;slow&#39;</span>)<span class="op">;</span></span>
<span id="cb487-59"><a href="jquery-简介.html#cb487-59"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb487-60"><a href="jquery-简介.html#cb487-60"></a>    <span class="kw">&lt;/script&gt;</span></span>
<span id="cb487-61"><a href="jquery-简介.html#cb487-61"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb487-62"><a href="jquery-简介.html#cb487-62"></a></span>
<span id="cb487-63"><a href="jquery-简介.html#cb487-63"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>

</div>
</div>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="vue-js-组件.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="jquery应用案例.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/yangjh-xbmu/front-end/edit/master/8001-JQuery-intro.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["front-end.pdf", "front-end.epub"],
"toc": {
"collapse": "section"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
